AngularJS初探

2017-04-26 本文已影响0人 LiuliuZhang

Hello World

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

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

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

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

要执行，必须在容器前面加上ng-app，表示里面的代码由Angular来管理<html ng-app>或<div ng-app ng-init="user.name='world'">
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 ng-app="myApp" ng-controller="DemoController">说明这个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里面的数据

表达式

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

  <style>
    /* ng-cloak指令就是在NG执行完毕过后自动移除 */
    [ng-cloak],
    .ng-cloak {
      display: none;
    }
  </style>

常用表达式

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

AngularJS初探

Hello World

MVC

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

表达式

猜你喜欢

热点阅读