AngularJS-第一个程序(初步介绍搭建Module、Controller和Scope)

最新推荐文章于 2020-05-18 23:22:56 发布

原创最新推荐文章于 2020-05-18 23:22:56 发布 · 872 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS #AngularJS第一个程序 #AngularJS初步搭建Module、Controller

AngularJS 专栏收录该内容

6 篇文章

订阅专栏

AngularJS核心

2.1 Hello AngularJS

一个构建动态Web应用程序的结构化框架。

基于JavaScript的MVC框架。

主要作用：

简化复杂Web应用的开发难度
1. MVC程序架构，解耦应用逻辑、数据模型和视图
2. 数据绑定
3. 依赖注入
4. Ajax服务
提高应用程序的可测试性、可维护性

擅长领域：

单页面应用程序Single Page Application（SPA）
CRUD程序

下载和使用

官网：http://angularjs.org 自由门

中文网：http://www.angularjs.net.cn

文档：http://www.angularjs.net.cn /api

2.2 模块 - Module

创建方式：

angular.module(‘myApp’,[]);

使用模块的好处：

保持全局命名空间的清洁；
编写测试代码更容易；
易于在不同的应用程序之间复用代码。

2.3 控制器Cotroller和作用域Scope

控制器：在angularJS中控制器是一个函数，用来向视图的作用域添加额外的功能，用来设置作用域的初始状态并添加自定义行为。

控制器的声明：

app.controller(‘controllerName’,function($scope){...})

控制器的使用：

在需要的地方（html某个标签上）添加ng-controller

使用控制器注意事项：

尽可能精简控制器，制作和$scope相关的操作
不适合在控制其中执行DOM操作、格式化或数据操作。

创建 Hello AngularJS

<!DOCTYPE html>
<!-- ng-app="myApp应用整个HTML作用域，也可单独设置在body、div等标签中(AngularJS应用作用域)-->
<html ng-app="myApp">
  <head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/angular-csp.css"/>
    <title>Hello,AngularJS</title>
  </head>
  <!-- myController控制器应用body作用域 -->
  <body ng-controller="myController">
    <h1>{{'Hello,AngularJS'}}</h1>
    <!-- 点击按钮执行add()函数,每次num值加一 -->
    <button ng-click="add()">增加</button>
    <div>{{num}}</div>

    <!--测试控制器的嵌套-->
    <div ng-controller="myController2">
      <!-- 点击按钮执行父控制器add()函数 -->
      <button ng-click="add()">增加-myController2</button>
      <div>{{num}}</div>
    </div>

    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>

js文件

 /** index.js MVC搭建构架
 * 使用angular.module()创建应用程序模块
 * 第一个参数是模块名称
 * 第二个参数是依赖模块的数组
 */
var app = angular.module('myApp',[]);

//定义控制器myController
//第一个参数是控制器名称
//第二个参数是控制器具体定义，务必添加$scope(作用域对象)
app.controller('myController', function ($scope) {
    //在作用域中定义变量
    $scope.num = 0;
    //在作用域中定义add函数，以便视图中使用
    $scope.add = function(){
        $scope.num++;
    }
});

//定义控制器myController2(父控制器包涵子控制器，那么子控制器继承父控制器)，测试控制器的嵌套
app.controller('myController2', function ($scope) {

})

效果：点击按钮自加1