前言

之前有接触过基本的AngularJS，未过多涉及，于是乎本系列我们来着重讲讲AngularJS，对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写。在之前项目过程中用到过avalon，但是avalon并未被广泛使用也就放弃了，至于孰最轻量，性能更好作为非专业的我就不妄下结论，lz只明白一点，业界最流行什么前端框架，招聘大部分要求会哪些框架，lz才会去学习，当然其中的乐趣也是油然而生，每一次敲代码的过程好似在浩瀚大海中探幽一番，别有一番滋味。

简短介绍

AngularJS也是一种MVVM前端框架，其中的路由、指令、服务、工厂等。它帮助了我们开发前端UI并简化了一些繁琐的过程，同时它也恰如其分的支持客户端的单元测试。它涉及到Model、View、Controller。当AngularJS应用程序被启动时，其Model、Controller、View以及HTML文档都会被加载到用户的设备上，最终运行在用户设备的硬件中。至于Model、View、Controller这三者之间的联系，我们看如下图便知。

HelloWorld

貌似每学一门新的语言或者框架首先都会想到的是和这个世界打个招呼，下面我们利用AngularJS和这个世界来打个招呼。

（1）页面定义模块然后获取模块

var app = angular.module('myApp', []);

（2）定义控制并获取该控制器进行对应的赋值

app.controller('ctrl', ['$scope', function($scope){

    $scope.greeting = {text:"Hello"};

}])

（3）UI页面

<html ng-app="myApp">

<head>

    <title></title>

    <script type="text/javascript" src="Scripts/angular.min.js"></script>

    <script type="text/javascript" src="app.js"></script>

    <script type="text/javascript" src="HelloWorld.js"></script>

</head>

<body ng-controller="ctrl">

    {{greeting.text}},World

</body>

</html>

最终结果如下：

（1）模块：AngularJS中的module作为Angular应用程序的入口点。那模块从何而来呢？这里不做过多探讨，涉及到依赖逐入的概念。依赖逐入是AngularJS中主要的优点之一，在DI作为一种设计模式被定义在应用程序中作为配置的一部分，如此一来，无需我们手动去创建，当应用程序首次启动时，DI会自动加载模块依赖。

（2）模型类：拿MVC类比，我们通过模型来获取数据，此时我们必须定义模型类，同理在大多数JavaScript客户端框架中也会要求我们创建模型类，但是在AngularJS中这种情况不会发生，在AngularJS中有一个$scope对象，此对象用来存储模型类，Scopes被附加到DOM元素上，我们可以通过使用数据属性到$scope的对象。$rootScope是AngularJS程序中的父Scope。

（3）控制器：在AngularJS中控制器作为视图和model的桥梁，在这个控制器这个区域中我们可以放置一个视图的所有业务逻辑。当应用程序中的业务逻辑被多个控制器所使用时，此时我们应该将业务逻辑放置在AngularJS中的Service（服务）中，当我们需要用到这些业务逻辑时，我们需要在DI的帮助下来获取这些服务。

下面一张图简短的概括了视图（View）、$scope、控制器（Controller）之间的关系。

$scope与Controller

我们通过一个例子来看这二者之间的关系：

UI

<html ng-app="myApp">

<head>

    <title></title>

    <script type="text/javascript" src="Scripts/angular.min.js"></script>

    <script type="text/javascript" src="app.js"></script>

    <script type="text/javascript" src="scopeController.js"></script>

</head>

<body>

    <div ng-controller="ctrlName">

        <input type="text" width="200px" ng-model="name" />

        <h2>Your Name : {{name}}</h2>

    </div>

</body>

</html>

JS

app.controller('ctrlName', function ($scope) {

    $scope.name = '';

});

我们看看演示效果：

Controller as语法

对于上述我们可以通过另外一种方式实现，在AngularJS 1.1.5版本后开始支持控制器as语法。我们给出代码看看。

UI

<html ng-app="myApp">

<head>

    <script type="text/javascript" src="Scripts/angular.min.js"></script>

    <script type="text/javascript" src="app.js"></script>

    <script type="text/javascript" src="myCtrl.js"></script>

    <title></title>

</head>

<body ng-controller="myCtrl as u">

    <h2>{{u.username}}</h2>

    <h1>请输入你的名字 :</h1>

    <input type="text" width="200px" ng-model="u.name" />

    <h2>你的名字是 : {{u.name}}</h2>

</body>

</html>

JS

app.controller('myCtrl',function(){

    var self = this;

    self.name = "";

    self.username = "xpy0928";

})

结果演示：

总结

本节我们简短的介绍了AngularJS以及一些基本概念。下节再见。

AngularJS之Scope及Controller（一）的更多相关文章

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

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

  2. 深入理解 AngularJS 的 Scope

    JavaScript 的原型继承就是奇葩. 之前在 V2EX 上看到讨论说,不会 OOP 的 JavaScript 的程序员就是野生程序员.看来我是属于野生的.   一.遇到的问题 问题发生在使用 A ...

  3. 深入理解 AngularJS 的 Scope(转)

    一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller ...

  4. 转: 深入理解 AngularJS 的 Scope

      查看 DEMO.参考 StackOverflow. ng-switch ng-switch 的原型继承和 ng-include 一样.所以如果你需要对基本类型数据进行双向绑定,使用 $parent ...

  5. 转深入理解 AngularJS 的 Scope作用域

    文章转载英文:what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs 中文:http://www. ...

  6. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  7. AngularJS中Scope间通讯Demo

    在AngularJS中,每一个controller都有对应的Scope,而Scope间有时候需要通讯.比如有如下的一个controller嵌套: <body ng-controller=&quo ...

  8. AngularJs $rootScope.Scope 作用域操作

    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...

  9. 一步步构建自己的AngularJS(2)——scope之$watch及$digest

    在上一节项目初始化中,我们最终得到了一个可以运行的基础代码库,它的基本结构如下: 其中node_modules文件夹存放项目中的第三方依赖模块,src存放我们的项目代码源文件,test存放测试用例文件 ...

随机推荐

  1. 2-Sat问题

    二分+2-Sat 判断是否可行 输出字典序最小的解 输出字典序可行解 其实这些都是小问题,最重要的是建图,请看论文. 特殊的建边方式,如果a b是一对,a必须选,那么就是b->a建边. HDU ...

  2. Java：单例模式的七种写法

    第一种(懒汉,线程不安全): 1 public class Singleton { 2 private static Singleton instance; 3 private Singleton ( ...

  3. 线性分式变换（linear fractional transformation）

    线性分式变换(linear fractional transformation)的名称来源于其定义的形式:(ax+b)/(cx+d),其中分子分母是线性的,然后最外层是一个分式形式,所以叫做这个名字, ...

  4. 前端-SEO

    SEO是 search Engine Optimization   (搜索引擎优化) SEO: ①白帽SEO(普通SEO做的优化) 网站标题.关键字.描述 网站内容优化 Robot.txt文件 网站地 ...

  5. Call for Papers International Conference for Smart Health (ICSH) 2014

    Call for PapersInternational Conference for Smart Health (ICSH) 2014 Beijing, China July 10-11, 2014 ...

  6. 使用 Productivity Power Tools 2013来帮助你提高 VS2013的工作效率

    Visual Studio Gallery中发布了Productivity Power Tools 2013 的更新.在此版本中,此版本解决了客户报告的大量错误和问题,并介绍了一项称为语法行压缩的新功 ...

  7. Android安全开发之浅谈密钥硬编码

    Android安全开发之浅谈密钥硬编码 作者:伊樵.呆狐@阿里聚安全 1 简介 在阿里聚安全的漏洞扫描器中和人工APP安全审计中,经常发现有开发者将密钥硬编码在Java代码.文件中,这样做会引起很大风 ...

  8. ABP理论学习之设置管理

    返回总目录 本篇目录 介绍 定义设置 获取设置值 更改设置 关于缓存 介绍 每个应用程序都需要存储一些设置信息,然后在应用程序中的某个地方使用这些设置.ABP提供了健壮的基础设施来存储或检索服务端和客 ...

  9. 新浪微博UWP版-实现‘分享功能’的艰难路

    索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了.有关Weibo UWP版更多的信息请大家参考这 ...

  10. Java NIO5：选择器1---理论篇

    选择器 最后,我们探索一下选择器.由于选择器内容比较多,所以本篇先偏理论地讲一下,后一篇讲代码,文章也没有什么概括.总结的,写到哪儿算哪儿了,只求能将选择器写明白,并且将一些相对重要的内容加粗标红. ...