zoukankan      html  css  js  c++  java
  • Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

    1.下载angularjs

    进入其官网下载:https://angularjs.org/‎,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js

    所有版本:https://code.angularjs.org/

    2.示例1

    HelloWorld !

    新建一个helloworld.html

    <!doctype html>
    <html ng-app>
        <head>
            <script src="angular.js"></script>
        </head>
        <body>
            Hello {{'World'}}!
        </body>
    </html>

    然后将下载的angular.js拷到与helloworld.html的同一目录

    效果如下所示:

    3.helloworld.html代码说明

    标记ng-app告诉AngularJS处理整个HTML页并引导应用:

    <htmlng-app>

    注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World’。

    Hello {{'World'}}!

    4.示例2

    本示例演示AngularJS的双向数据绑定(bi-directional data binding):

    1. 编辑前面创建的helloworld.html文档。
    2. 将下面的源代码复制到您的HTML文件。
    3. 刷新浏览器窗口。

    源代码

    <!doctype html>
    <html ng-app>
        <head>
            <script src="angular.js"></script>
        </head>
        <body>
            Your name: <input type="text" ng-model="yourname" placeholder="World"><hr>
            Hello {{yourname || 'World'}}!
        </body>
    </html>

    效果:

    该示例有一下几点重要的注意事项:

    • 文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
    • 双大括号标记将yourname模型变量添加到问候语文本。
    • 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

    现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。

    5.angularjs框架简介

    模板(Templates)

    模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

    应用程序逻辑(Logic)和行为(Behavior)

    应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

    模型数据(Data)

    模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

    AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

    6.ubuntu 12.04下安装nodejs、npm和karma

    1)安装nodejs

    直接输入命令sudo apt-get install nodejs 安装的是0.6版本的,这个会出现问题,导致接下来安装js测试工具karma,出现问题.

    所以用下载安装自己编译的方式,http://nodejs.org/download/,我这里下载的是http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz

    然后,执行命令 

    tar zxvf node-v0.10.26.tar.gz 
    cd node-v0.10.26
    ./configure
    make
    sudo make install

    这样直接编译会出错!!

    必须先把其依赖环境搭建好,必须先执行如下命令:

    sudo apt-get install g++ curl libssl-dev apache2-utils
    sudo apt-get install git-core

    git如果已经安装则不需要再安装了.

    当然也可从github上直接clone了,即使用如下命令:

    git clone git://github.com/ry/node.git
    cd node
    ./configure
    make
    sudo make install

    测试是否成功???

    amosli@amosli-pc:~$ node --version
    v0.10.26

    查看版本是否正确,这里是正确的.

    2)安装npm

    sudo apt-get install npm

    3)安装karma

    sudo npm install -g karma

    只要安装nodejs正确,那么后两步将会十分顺利.

    否则安装karma时将会报如下的错误:

    amosli@amosli-pc:~$ sudo npm install -g karma
    npm http GET https://registry.npmjs.org/karma
    
    npm ERR! Error: failed to fetch from registry: karma
    npm ERR!     at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12
    npm ERR!     at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)
    .....

    karma以前叫testacular,是js的测试框架.

     安装nodejs时参考了:http://howtonode.org/how-to-install-nodejs 

     如果还报错,那么可以执行以下命令试试,注册npm:

    npm config set registry http://registry.npmjs.org/
  • 相关阅读:
    el-select下拉框选项太多导致卡顿,使用下拉框分页来解决
    vue+elementui前端添加数字千位分割
    Failed to check/redeclare auto-delete queue(s)
    周末啦,做几道面试题放松放松吧!
    idea快捷键
    解决flink运行过程中报错Could not allocate enough slots within timeout of 300000 ms to run the job. Please make sure that the cluster has enough resources.
    用.net平台实现websocket server
    MQTT实战3
    Oracle 查看当前用户下库里所有的表、存储过程、触发器、视图
    idea从svn拉取项目不识别svn
  • 原文地址:https://www.cnblogs.com/amosli/p/3698365.html
Copyright © 2011-2022 走看看