The first girlfriend – AngularJS

前言：

结识AngularJS：

• 记忆中是2015的夏天, 大中原炎热的气候, 给我这个coding monkey有一丝丝很烦闷的心情, 偶然间我就结识了她AngualrJS.
  

• 一上来Big-man就爱上了这为小姐, 她还带Big-man认识她的父母(主要的), Misko Hevery(Google员工)和Adam Abrons(Google), 只能说是大神界别的, 难怪这位小姐在我面前这么放肆。

---

• AngularJS还给Big-man看了她的着装标准–MVC
  
  • 这个MVC其实很好理解, 穿起来也很简单, 但是在AngularJS身上的表现和让她这么美的原因是什么了? 听我仔细给你们分析Big-man这位first-grilfriend。
  • 首先MVC并不是她的独有外衣, 它是一种设计模式, 但是它又不是23种设计模式中的一种, 至于为什么？ 请看我的另一篇博客, 这里就不过多的阐述了。

---

正文分析：

M(Module)：

• 中文翻译过来的意思时模型、模块的意思:
• 但是在Angularjs中的Module表示的是数据模型层。
• 在AngularJS中，Big-man个人认为模块是定义应用的最主要方式。模块包含了主要的应用代码。

• 一个应用（PC端、移动端）可以包含多个模块，每个模块都包含了定义具体功能的代码。

• 使用模块能给像Big-man这样的小白菜带来什么样的好处了？不然怎么和你进行相处啊？，Big-man深入了解了一下发现使用模块确实可以带来不少的好处，比如：

  • 1、保持全局命名空间的清洁；怎么这样说了，因为在JS代码里面尽可能地少去使用全局变量的声明方式，模块地引入很好地解决了这样一个问题。这样的解释Big-man自我感觉理解更好一些的。
  • 2、编写测试代码更容易，并能保持其清洁，以便更容易找到相互隔离的功能；
  • 3、易于在不同应用间复用代码；
  • 4、使应用能够以任意顺序加载代码的各个部分。

• AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被依赖注入到模块中的对象列表。

• angular.module('myApp', []);
• 注：Big-man这里所写下的方法相当于AngularJs模块的setter方法，是用来定义模块的。
• angular.module(‘myApp’);
• 注：然而上面的这个方法是用户获取应用，相当于AngularJs的getter方法，用来获取对模块的引用。
• 参数说明

• 1、name(字符串)

  • name是模块的名称，字符串变量。

• 2、requires（字符串数组）

  • requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载由注入器 进行预加载。

---

• 一下看一下具体实例：

<ul ng-app="myApp" ng-controller="myCtrl">      <li ng-repeat="x in items track by $index">          <strong>{{x}}</strong>      </li>  </ul>  <script>      //自定义模块      var app = angular.module('myApp', []);      app.controller('myCtrl', function ($scope) {          $scope.items = ['rose', 'I', 'love', 'you', '];      });  </script>  

• 对应关系：
• ng-app="myApp" <——> angular.module('myApp', []);

• ng-controller="myCtrl" <——> app.controller('myCtrl', function ($scope)

• 输出：

roseIloveyou!

• 实例2: 这个实例Big-man只是给出代码，希望看到的人在评论给出分析吧，嘿嘿。

<div class="alert alert-danger" ng-app="myApp" ng-controller="myCtrl">          {{a}}+{{b}}={{c}}  </div>  <script>      //自定义模块1,      angular.module('common', []).service('addition', function () {          this.add = function (a, b, c) {              return a + b + c;          }      });      //自定义模块2，依赖于模块一      var app = angular.module('myApp', ['common']);      app.controller('myCtrl', function ($scope, addition) {          $scope.a = 'rose';          $scope.b = 'jackdan9';          $scope.c = 'love';        $scope.c = addition.add($scope.a, $scope.b, $scope.c);      });  </script>  

---

V(View)：

• 中文翻译过来是视图、外表展示。

• 但是在AngularJS中的View表示的是视图层,负责展示。

• AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。接下来Big-man会一一进行分析其中的作用。

• ng-view

• ng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。

<div ng-app="mainApp">...  <div ng-view>      <h2>Love Rose</h2>  </div></div>

• 使用功能：定义一个div与ng-view在主模块中。

• ng-template

• ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由$routeProvider映射控制器视图“id”属性。

<div ng-app="mainApp">...  <script type="text/ng-template" id="loveRose.html">   <h2> Love Rose </h2>     {{message}}  </script></div>

• 使用功能：定义类型作为主模块中 ng-template 的脚本块。

• $routeProvider

• $routeProvider是组网址的配置，将它们映射相应的HTML页面或 ng-template，并附加一个控制器使用相同键的服务。

<div ng-app="mainApp">...  <script type="text/ng-template" id="loveRose.html">   <h2> Love Rose </h2>     {{message}}  </script></div>

• 使用功能：定义类型作为主模块中 ng-template 的脚本块。

var mainApp = angular.module("mainApp", ['ngRoute']);  mainApp.config(['$routeProvider',    function($routeProvider) {     $routeProvider.       when('/loveRose', {        templateUrl: 'loveRose.html',        controller: 'loveRoseController'       }).       when('/viewRose', {        templateUrl: 'viewRose.html',        controller: 'viewRoseController'       }).       otherwise({        redirectTo: '/loveRose'       });    }]);

• 使用功能： 定义主模块的脚本块，并设置路由配置。

• 结合上面的分析，Big-man总结出了以下 需要考虑的重要问题：

  • $routeProvider被定义为使用关键字作为‘$routeProvider’下mainApp模块的配置功能；
  • $routeProvider当定义了URL“/addStudent”映射到“addStudent.html”。 addStudent.html应存在于相同的路径主要的html 页面。如果htm页面没有定义，那么ng-template被id=”addStudent.html”使用。我们已经使用了ng-template；
  • "otherwise"是用来设置的默认视图；
  • "conlloer"是用来设置该视图对应的控制器；

• 完整实例：下面Big-man将会给出一个较为完整的实例，但是分析输出结果，还请大家进行分析。

<html><head>  <title>Angular JS Views</title>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script></head><body>  <h2>AngularJS Sample Application</h2>  <div ng-app="mainApp">   <p><a href="#loveRose">Love Rose</a></p>   <p><a href="#viewRose">View Rose</a></p>   <div ng-view></div>   <script type="text/ng-template" id="loveRose.html">     <h2> Love Rose </h2>     {{message}}   </script>   <script type="text/ng-template" id="viewRose.html">     <h2> View Rose </h2>          {{message}}   </script>    </div>  <script>   var mainApp = angular.module("mainApp", ['ngRoute']);   mainApp.config(['$routeProvider',     function($routeProvider) {      $routeProvider.        when('/loveRose', {         templateUrl: 'loveRose.html',         controller: 'LoveRoseController'        }).        when('/viewRose', {         templateUrl: 'viewRose.html',         controller: 'ViewRoseController'        }).        otherwise({         redirectTo: '/loveRose'        });     }]);     mainApp.controller('LoveRoseController', function($scope) {      $scope.message = "This page will be used to display jackdan9's love for rose";     });     mainApp.controller('ViewRoseController', function($scope) {      $scope.message = "This page will be used to display the girl";     });  </script></body></html>

---

C(Controller)：

• 中文翻译过来是控制器、控制者;

• 但是在AngularJS中的Controlller表示的是业务逻辑和控制逻辑。

• 控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，Big-man用它来给作用域对象设置初始状态，并添加自定义行为。

• 当Big-man在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于Angularjs会自动实例化控制器，所以Big-man只需要写构造函数即可。
• 下面的例子展示了控制器初始化：

function my Controller($scope){  $scope.msg="hello, jackdan9!";  }

• Big-man分析了上面的创建控制器的方法，Big-man个人认为这样的创建方式会污染全局命名空间，更合理的办法是创建一个模块，然后在模块中创建控制器，如下：

var myApp=angular.module("myApp",[]);myApp.controller("myController",function($scope){  $scope.msg="hello, jackdan9!";})

• Big-man采用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指令将浏览器中的mouseup事件，同设置在DOM元素上的事件处理程序绑定在一起（例如，当浏览器在某个DOM元素上触发了点击事件，函数就会被调用）。和前面的例子类似，绑定看起来是这样的：

<div ng-controller="FirstController">    <h4>The simplest adding machine ever</h4>    <button ng-click="add(1)" class="button">Add</button>    <a ng-click="subtract(1)" class="button alert">Subtract</a>    <h4>Current count: {{ counter }}</h4></div>

• 按钮和链接都被绑定在了内部$scope的一个操作上，当点击任何一个元素时AngularJS都会调用相应的方法。
• 注意，当设置调用哪个函数时，会同时用括号传递一个参数（add(1)）

app.controller('FirstController', function($scope) {    $scope.counter = 0;    $scope.add = function(amount) { $scope.counter += amount; };    $scope.subtract = function(amount) { $scope.counter -= amount; };});

• Angularjs与其他框架的最大区别在于，控制器并不适合来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作，它只是视图和$scope之间的桥梁。

---

• 控制器嵌套（作用域包含作用域）
• AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app所处的层级来讲，它的父级作用域就是$rootScope。
• 默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。Big-man个人认为在这一点上，类似于js的作用域链，这一层无法找到的作用域会反馈到上一层的作用域上。
• 通过例子来看一下这个行为。创建一个ParentController，其中包含一个user对象，再创建一个ChildController来引用这个对象：

app.controller('ParentController', function($scope) {    $scope.person = {greeted: false};});app.controller('ChildController', function($scope) {    $scope.sayHello = function() {        $scope.person.name = 'Ari Lerner';    };});

• 如果我们将ChildController置于ParentController内部，那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制，我们可以在子作用域中访问ParentController的$scope对象。

<div ng-controller="ParentController">    <div ng-controller="ChildController">        <a ng-click="sayHello()">Say hello</a>    </div>    {{ person }}</div>

---

总结：

MVC的好处：

• 让我的这位女神身材更加的火爆(职责清晰, 代码模块化)

---

---

• Module:
  
  • AngularJS的主要美貌来源:
    

---

JackDan9Thinking.
JackDan9-grilfriend beauty.