先来看一个例子

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<title>angularJS</title>

<!--angular引用-->

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>

<!-- 控制器js -->

<script src="MyApp.js"></script>

</head>

<body ng-app="AppModule">

    <div ng-controller="SayHello">

        <span ng-bind="name"></span>

        <span ng-bind="say"></span>

    </div>

    <div ng-controller="NameList">

        <ul>

            <li ng-repeat="x in nList">

                <a ng-bind="x" href="#"></a>

            </li>

        </ul>

    </div>

</body>

</html>
var MyApp = angular.module('AppModule',[]);        // 注册模块

// SayHello控制器

MyApp.controller('SayHello',['$scope',function($scope){

    $scope.name = "Jerry";

    $scope.say = "Hi! Tom."

}]);

// NameList控制器

MyApp.controller('NameList',['$scope',function($scope){

    $scope.nList = ['javascript','jQuery','angularjs','vuejs','HTML5','CSS3','nodejs'];

}]);

运行结果

var MyApp = angular.module('AppModule',[]); 用来注册模块，声明一个变量引用angular的module方法，注册一个模块；

angular.module('AppModule',[]); 第一个参数定义模块名；第二个参数引用需要依赖的其他模块（模块名组成的数组）。

MyApp.controller('conName' , ['$scope',function(){  //... ...  }]); 第一个参数定义控制器名称；第二个参数定义控制器内容，数组第一个元素注册scope对象，数组第二个为控制器函数体。

注意：这里的$scope是angular的内置对象并不是普通函数，不可随意命名。

angularjs的controller使用中的注意点

1.不要试图去复用controller，一个控制器一般只负责一小块视图；
2.不要在controller中操作DOM，这不是控制器的职责，在使用中会浪费浏览器资源；
3.不要在controller里面做数据格式化，ng有很好用的表单空间；
4.不要在controller里面做数据过滤，ng有$filter服务；
5.一般controller不要互相调用，控制器之间的交互会通过事件去做交互；

$scope的作用及定义

1.$scope是一个POJO（plain old JavaScript object）；
2.$scope提供了一些工具方法$watch()/$apply()；
3.$scope是表达式的执行环境；
4.$scope是一个树形结构，与DOM标签平行；
5.子$scope对象会继承父$scope上的属性和方法；
6.每一个angular应用只有一个根$scope对象（位于ng-app上）；
7.$scope可以传播事件，类似DOM事件，可以向上向下传播。
8.$scope是angular的基础核心。
9.可以用angular.element($0).scope()进行调试；

angular项目结构

angular项目可在前端实现MVC，angular的mvc与其他后台语言的mvc结构类似；js目录放自定义的controller，framework目录放官方或第三方controller或插件，tpls目录放母版页和视图，node_module目录放第三方或官方node插件。
一般app.js为angular项目入口，类似后台语言的main方法。

angularjs探秘<三> 控制器controller及angular项目结构的更多相关文章

  1. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  2. 精通AngularJS（三）深入scope，继承结构，事件系统和生命周期

    深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...

  3. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  4. AngularJs(五）从Controller控制器谈谈$scope作用域

    大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...

  5. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  6. Angularjs 控制器controller的作用

    我们在view中给模型的一个参数name赋值 “hello world” . 这是一种简单的赋值,我们可以在视图中通过 ng 指令(以ng-开头的指令)实现了简单的赋值,如果遇到复杂的逻辑运算操作,那 ...

  7. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  8. vuejs angularjs 框架的一些比较（vue项目重构四）

    使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...

  9. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

随机推荐

  1. alias 创建别名

    在我们的"/home/用户名/"的目录下,会有一个“.bashrc”文件,修改步骤如下: 在文件的末尾添加: alias 想要的别名=文件路径(文件路劲加引号)例如:alias p ...

  2. 蒲公英 Bug 管理云

    官网访问地址:https://www.tracup.com/ 优势地方: ①免费使用 现在免费,今后也一直免费. ②无需部署 网站采用云端部署,这也就意味着无需开发者自己搭建.部署,注册一个蒲公英账号 ...

  3. Ambari对HDP的版本支持列表

    截至目前最新的Ambari版本为2.6: https://docs.hortonworks.com/HDPDocuments/HDP2/HDP-2.6.3/bk_support-matrices/co ...

  4. js 实现滚动字幕

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 注册表项关于start参数的说明

    start = {0,1,2,3,4}0 == 由核心装载器装载1 == 由I/O子系统装载2 == 自动启动3 == 手工启动4 == 禁止启动

  6. 从错误0x80070522，谈强制完整性控制(MIC)。

    在Windows 7碰到一个奇怪的问题,DE二个盘,NTFS的权限(属性--安全页)一模一样,没有任何区别,但在E盘根目录可以创建文件或文件夹,而在D盘根目录下报错:0x80070522,如果使用应用 ...

  7. Java第02次实验提纲(Java基本语法与类库)

    1. 熟悉Git 1.1 学会使用网页版的操作代码仓库(gitee) 申请账号,然后根据老师提供的链接或者二维码加入团队,然后修改昵称. fork老师提供的代码库项目,新建自己学号命名的文件并上传一些 ...

  8. java中的强,软,弱,虚引用

    引用的应用场景 我们都知道垃圾回收器会回收符合回收条件的对象的内存,但并不是所有的程序员都知道回收条件取决于指向该对象的引用类型.这正是Java中弱引用和软引用的主要区别. 如果一个对象只有弱引用指向 ...

  9. Hadoop概念学习系列之pagerank的友情链接（三十八）

    博主我带大家,弄清楚一个事实. 比如,搜狐主页下方,有很多友情链接,这些友情链接,那可是一个位置就是多少钱. 有人说,一个位置多少钱,这又没有给我带来点击量,那我干嘛还每年花上几十万,给搜狐,就那么放 ...

  10. xp sql2000 安装SP4失败解决方案

    环境:xp sp3 SQL: sql2000sql2000 SP4下载链接: http://www.microsoft.com/downloads/details.aspx?familyid=8E2D ...