AngularJs 学习（一）

AngularJs 学习（一）
最近学习了一下关于AngularJs的知识，发现和Vue还是有非常相似的东西。所以对于学过Vue的自己来说，还是比较好理解的

特点：双向数据绑定，单页面应用

控制器：

　　AngularJs控制器可以控制网页上的DOM元素，也可以响应网页上的单击事件，这一切源于$scope,它是模型(ng-model)于视图(View)

的数据通道。其中$scope起到了一个数据传递作用。

而要实现控制器必须在DOM元素上加上ng-controller( Angular的一个指令), Controller于View是绑定在一起的。当Angluar加载时，它就会加载

读取ng-controller的参数。

模块：

AngularJs的一个非常重要的概念--Module,对于一个Angular应用来说，是由多个模块组成的。同时模块是存在可复用性，可在多个地方被调用。

模板：

　这个地方是Angular比较重要的地方，（同时Vue中也是有的），对于一个项目模板是一个很重要的部分。它能动态的展示不同的视图（页面）。其中

要是使用模块这个功能就必须用到ng-template这个指令;同时使用模块这个一般和ng-view(管理视图）的指令一起使用

路由：

路由是什么，就是我们在应用上要实现页面的跳转，要实现这样的功能就需要使用路由来进行管理。在这里说明一下AngularJs1.2版本之后ngRoute被单独剥离出来，

需要进行重新引用。AngularJS的$route所提供的$routeProvider声明路由

工厂方法：

　这个和java中的工厂方法有点类似，毕竟设计模式这样。就是如果一个对象$scope.xxx要在多个地方调用，就需要去把这个对象个做成单例对象。而在AngularJs里面实现

这种最简单的方式就是调用factory();通过factory()来返回对应的属性方法。

过滤器：

　　格式 {{ name | xx}} xx: 过滤器得实现 xx一般有（ eg: filter: param), 如果表示否定要在参数(param)前加上！

控制器之间的传值：

　　从上面已经知道$scope是局部作用域，这样的话就不怎么利于控制器之间的传值。当然前面也提到通过工厂方法也可以实现，这就在Angularjs之中有这样的一个概念：

单例服务是AngularJS本身支持的数据和代码共享方式。因为是单例的，所有的控制器访问的便是同一份数据，从而可以很轻松地实现控制器之间地切换。

AngularJs数据的传输本身就提供了多种通信机制：
- 　　作用域继承：利用子控制器继承父控制器上的数据
- 注入服务：把需要功效的数据注册成为一个服务（Service), 在需要的控制器中添加依赖注入
- 基于事件：利用AngularJS的事件机制，使用$on $emit 和 $broadcast;
其实之前的工厂方法就是基于注入服务实现的，接下来要介绍的一种是基于作用域继承的。$rootScope : ng-app 为AngularJS创建的作用域

$watch: 监控数据模型的变化

　　$scope.$watch(watchFn, watchAction, deepWatch);

　　watchFn: 被检测的对象

watchAction: 函数表达式，发生变化时候被调用，会接收新旧两个值

　　deepWatch: 如果设置为true，这个可选的布尔型参数将命令AngularJS去检测被监控的对象的每个数据是否发生变化。一般少用，集合多了，容易造成负载严重

提供一个案例来供分析：
```
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title> Hello World in AngularJs </title>
   <script src="js/angular.min.js"></script>
  
   <script src="js/angular-route.js"></script>

  
 
</head>
<body>
<div ng-view></div>

<script type="text/ng-template" id="/todos.html">
  Search: <input type="text" ng-model="search">
  <ul>
    <li ng-repeat="todo in todos | filter: search">
      <input type="checkbox" ng-model="todo.completed">
     
      <a href="#/{{ $index }}"> {{ todo.name }}</a>
    </li>
  </ul>
</script>
<script type="text/ng-template" id="/todoDetails.html">
  <h1>{{ todo.name }}</h1>
  completed: <input type="checkbox" ng-model="todo.completed">
  note: <textarea>{{todo.note}} </textarea>
</script>


<script>
  var app = angular.module('myApp', ['ngRoute']);

  // 创建工厂方法 实例一个公用对象 注入Todos服务
  app.factory('Todos', function () {
    return [
      { name: '掌握 HTML/CSS/Javascript', completed: true },
      { name: '学习 AngularJS', completed: false },
      { name: '熟悉 NodeJS ', completed: true },
      { name: '接触 ExpressJS', completed: false },
      { name: '搭建 MongoDB database', completed: false },
    ]
  })
  // 创建路由
  app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: '/todos.html',
        controller: 'TodoController'
      })
    .when('/:id', {
          templateUrl: '/todoDetails.html',
          controller: 'TodoDetailContrl'
      })
  }])


  // 创建控制器
  app.controller('TodoController', ['$rootScope', '$scope', 'Todos', '$filter', function($rootScope, $scope, Todos, $filter) {
    $scope.todos = Todos;
    $scope.$watch('search', function() {
       // 根作用域 相当全局作用域
       $rootScope.data = $filter('filter')($scope.todos, $scope.search);
    })
  }])

  app.controller('TodoDetailContrl', ['$rootScope', '$scope', '$routeParams', 'Todos', function($rootScope, $scope, $routeParams, Todos) {
    $scope.todo = $rootScope.data[$routeParams.id];
  }])
</script>
</body>
</html>
```
相关阅读:
0006 字符串转整数
 0005 反转整数
 0004 最长回文子串
 0003 无重复字符的最长子串
 0002 两数相加
 0001 两数之和
 使用jquery+css实现瀑布流布局
 更简单的轮播实现
 类和对象
 生产者-消费者（wait-notify实现）
原文地址：https://www.cnblogs.com/yaobolove/p/8506798.html

AngularJs 学习 （一）

AngularJs 学习（一）