Angular的简单入门：2个基本指令，MVC，模块化和SPA的概念

最新推荐文章于 2024-07-14 05:16:32 发布

Wang's Blog

最新推荐文章于 2024-07-14 05:16:32 发布

阅读量2k

点赞数

分类专栏： Angular | Ionic 文章标签： angular mvc 模块化 spa

本文链接：https://blog.csdn.net/Tyro_java/article/details/51225471

版权

Angular | Ionic 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。

Angular 程序的简单实现

html结构：

<script src='http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js'></script>
<div ng-app='myNgApp' ng-controller='myCtrl'>
  <input ng-model='user.name'><br>
  <input ng-model='user.gender'><br>
  <input ng-model='user.age'>
  <div>{{user.rank}}</div>
  <div>{{user.happy}}</div>
  <div>{{user.learn}}</div>
</div>

说明：
① 上面div标签中的属性ng-app和ng-controller是angular的两个指令。
② 第一个代表angular程序的作用范围:每个angular程序必须有这个入口，如果没有的话，需要用angular.bootstrap来手动驱动。
② 第二个代表angular程序的控制器,控制器必须在ng-app的范围之内，否则失效。
③ ng-model是用于表单的模型，用于代替表单的值，用作和程序之间交流的模型，可以进行双向的数据绑定
④ {{}}表达式只能够单向的绑定数据。实现从逻辑层到视图层的单向绑定，呈现数据。

JavaScript结构：

// 获取html中的myNgApp这个入口模块
var myNgApp = angular.module('myNgApp',[]);
// 获取html中的控制器
myNgApp.controller('myCtrl',function($scope){
  $scope.user={
    name:'Tom',
    gender:'男',
    age:11,
    rank:1,
    happy:'i am happy',
    learn:'i am learning'
  }
});

说明：

① 上面的$scope其值不能更改，是angular的一个视图模型。
② 上面的写法在压缩的时候会有问题，因为$scope是不能更改的，如果压缩时候启用了混淆，那么在局部作用域的$scope就会变成简单的字符如a，这样在angular里面就会发生错误。
③ 需要修改成下面这样:

myNgApp.controller('myCtrl',['$scope',function($scope){
  $scope.user={
    name:'Tom',
    gender:1,
    age:11,
    rank:1,
    happy:'i am happy',
    learn:'i am learning'
  }
}]);

我们再来看下Angular中最简单的一种绑定

直接上代码：

<script src="http://cdn.bootcss.com/angular.js/1.5.3/angular.js"></script>
<div ng-app="">
    <input type="text" name="name" ng-model="text" />
    {{text}}
</div>

嘿嘿，虽然上面代码毫无意义 - - ！

什么是MVC

mvc属于一种软件架构层面的东西，不属于设计模式
m(model模型),v(view视图),c(controller控制器)，使应用程序分为3个组成部分，每个组成部分之间有自己明确的职责(软件开发中的单一职责原则)，相互之间没有依赖关系，这就是软件开发中的高内聚，低耦合原则。
m 专注于处理数据和业务逻辑；v 专注于以友好的方式，向用户展示数据；c 用于组织和调度处理模型，实现m和v之间的纽带。

Angular中的模块化

模块化编程方式，每个模块实现特定功能，职责比较单一，模块与模块之间耦合度低，因为这样，组织和调度之间就会很有效率，增加代码的重用性。下面看下模块的定义和获取。

/* 这种方式定义一个模块1，不需要依赖其他模块 */
var module1 = angular.module('module1', []);

/* 定义一个模块2，依赖模块1 */
var module2 = angular.module('module2', ['module1']);

/* 没有第二个参数，表示获取一个module2的模块，赋值给变量module3 */
var module3 = angular.module('module2');

SPA的基本实现

spa是基于hashchange事件来实现的，通过不同的hash值，我们可以判断用户需要有什么样的资源，然后我们就给用户他们想要的资源
html结构:

<ul>
    <li><a href='#/music'>请求音乐资源</a></li>
    <li><a href='#/video'>请求视频资源</a></li>
    <li><a href='#/picture'>请求图片资源</a></li>
</ul>

JavaScript结构：

window.addEventListener('hashchange',function(){
    var hash = window.location.hash.substr(2);
    switch(hash) {
      case 'music':
        console.log('请求了音乐资源'); // 这里表示对应的业务逻辑
        break;
      case 'video':
        console.log('请求了视频资源'); // 同上
        break;
      case 'picture':
        console.log('请求了图片资源'); // 同上
        break;
      default:
        console.log('没有相关匹配');
    }
});