AngularJS初探

Hello World

AngularJS 1.x 的网址为 https://angularjs.org/
页面上HelloWorld代码

  
    
  
  
    

      Name:
      
      

      
Hello {{yourName}}!
    
  

使用CDN方式
通过百度CDN http://cdn.code.baidu.com/ 查找Angular的URL替代src的地址

使用npm install方式安装
新建项目文件夹，在文件夹下执行 npm install angular --save
将上面的src引入的代码换成
输入框中输入文本，会同时在下面文本的 {{yourName}}处显示

要执行，必须在容器前面加上ng-app，表示里面的代码由Angular来管理 或

ng-model建立了模型变量的双向绑定，表达式{{变量}}也建立了双向绑定

{{::user.name}}是单向绑定，后面数据修改，取出的值不同时修改

Angular 解放了传统 JavaScript 中频繁的 DOM 操作
Angular本地文档运行： hs -o -p 8888建立本地服务器

MVC

• Model: ng-model 中定义的可以看作Model
• View: 视图页面
• Controller: 控制器的JS代码
  以用户登录为例
• 模型
  • 我们数据库中所有用户的信息
  • 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
• 控制器
  • 接受用户在界面上填写的用户名和密码
  • 将用户名和密码交给模型
• 视图
  • 给用户呈现一个表单
  • 接受用户输入内容，并将其提交给控制器
  • 根据控制器返回的数据，响应用户页面

模块（Module）与控制器（Controller）

通过var app= angular.module('myApp',[]);注册模块，第一个参数是这个模块的名字，第二个参数是这个模块所依赖的模块。注意必须指定第二个参数，否则变成找到已经定义的模块。
在html中，

说明这个div交由myApp这个module来管理，controller由自定义DemoController来管理。
app.controller('DemoCtrl');创建一个DemoCtrl控制器，也可以通过如下代码创建并进行初始化。

    app.controller('DemoController', function($scope) {
      // 当控制器执行时会自动执行的函数
      $scope.user = {};
      $scope.user.name = '张三';
      // $scope不仅仅可以往视图中暴露数据，还可以暴露行为
      $scope.show = function() {
        console.log($scope.user);
      };
    });

angular在执行控制器函数时，会根据参数的名字（$scope）去自动的注入对象，由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称），如下所示（$scope）注入到function的a中。

    module.controller('HelloController', ['$scope','$http', function(a,b) {
      console.log(a);
    }]);

通常建立对象存储数据

      $scope.user = {
        username: '',
        password: ''
      };

行为数据，$scope暴露数据给全局用，不需要在function中传入

      $scope.login = function() {
        // 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上
        console.log($scope.user);
      };

angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite，然后用angular.element('body')操作
监视第一个值发生变化，回调第二个传入的函数。函数中传入两个参数，一般用(now, old)来表示当前和之前的值

      $scope.$watch('user.username', function(now, old) {
        // 当user.username发生变化时触发这个函数
        // console.log('now is ' + now);
        // console.log('old is ' + old);
        if (now) {
          if (now.length < 7) {
            $scope.message = '输入格式不合法';
          } else {
            $scope.message = '';
          }
        } else {
          $scope.message = '请输入用户名';
        }
      })

$scope 视图和控制器之间的桥梁
AngularJS Batarang插件，安装后，勾选Enable启用，然后点击Scopes，可以选择查看Scope里面的数据

表达式

ng-cloak隐藏表达式原型得到结果后显示，但直接用效果不理想，相当于在style中添加了[ng-cloak] { display: none;}。由于页面加载速度很快，style中还没加载完，表达式就直接显示在页面上了。因此我们要自己手工添加。也可以用class实现，在style中添加。或者将引入angular的代码放在head中也可以

常用表达式

 {{ 100 + 100 }}            数字  
 {{ 'hello' + 'angular' }}  字符串
 {{ zhangsan.name }}        对象，必须在$scope中定义
 {{ students[10] }}         数组 
 {{ true ? 'true':'false' }} 三元表达式