<body ng-app="Myapp">

    <div ng-controller="firstcon">

        <h1>hello {{ del }}</h1>

    </div>

</body>

（本人最近几个月一直研究angularjs，对angluarjs有些个人理解，首先分享些angular基础，以及重点概要，希望对angular初学者有些帮助，后续会陆续的分享我对angular的一些个人和重点要素的理解和用法）

现在，闲暇之余，一点一点的把自己学到的分享给大家！！

1、模块

在angular中主要模块定义方式：Angular.module("myapp",[]);

myapp:第一个模块的名称

[]：用来依赖的模块

2、作用域

　　angular启动生成视图是，会将ng-app元素同$rootScope进行绑定，$rootScope是所有$scope的最根部（ng-app是绑定controller方法，$rootscope是模块中的全局变量），不同的模块有不同的$rootScope，相当于每个人都有唯一的ID类似，在绑定数据的时候，回想找到上级，就是$scope，如果上级没有的话，那么就找本体（$rootscope），

 <sccript type="text/javascript">

         angular.module("Myapp", []).run(function ($rootScope) {

             $rootScope.name = "dd";

         })

         angular.module("Myapp1", []);

 </script>
　　<div ng-app="Myapp1">

        <h1>hello {{ name }}</h1>

    </div>

    <div ng-app="Myapp">

        <h1>hello {{ name }}</h1>

    </div>

3、控制器

　　控制器在在我看来，就是增强angular中的视图。Angularjs中的控制器是一个function，用来像视图页面作用域中添加功能的，用来给视图作用域对象设置初始状态和自定义行为。

我们在页面中创建一个控制器，angular就会生成并传递新的$scope给这个控制器

var first= angular.module("Myapp", []).run(function ($rootScope) {

            $rootScope.name = "bbb";

        })

       first.controller("firstcon", function ($scope) {

           $scope.del = "ddd";

       });
<body ng-app="Myapp">

    <div ng-controller="firstcon">

        <h1>hello {{ del }}</h1>

    </div>

</body>

　　上诉是描述一些控制器在js中的，控制器其实还能嵌套在html中

var first= angular.module("Myapp", []).run(function ($rootScope) {

            $rootScope.name = "bbb";

        })

       first.controller("firstcon", function ($scope) {

           $scope.del = "ddd";

       });

       first.controller("scend", function ($scope) {

           $scope.dh = "aaa"

       });
<body ng-app="Myapp">

    <div ng-controller="firstcon">

        <div ng-controller="scend">

            <h1>hello {{ del }}</h1>

            <h1>hello {{ dh }}</h1>

        </div>

    </div>

</body>

4、表达式

　　表达式和evel（表达式）非常像，在angular中表达式是由angularjs来处理的。angularjs通过$scope这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。讲$scope注入到控制中，然后调用它可以实现手动解析表达式

<script type="text/javascript">

        var first = angular.module("Myapp", []);

       first.controller("firstcon", function ($scope,$parse) {

           $scope.$watch('d', function (newVal, oldVal, scope) {

               if (oldVal !== newVal) {

                   var parseFun = $parse(newVal);

                   $scope.parseValue=parseFun(scope)

               }

           });

       });

    </script>
<body ng-app="Myapp">

   <div ng-controller="firstcon">

       <input ng-model="d" type="text" placeholder="deded" />

       <h2>{{parseValue}}</h2>

   </div>

</body>
 
$watch详解：
$watch简单使用
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。
 
$watch(watchExpression, listener, objectEquality);
每个参数的说明如下：
1. 
watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
2. 
3. 
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
4. 
5. 
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它
6. 
 
举个栗子：
$scope.name = 'hello'; var watch = $scope.$watch('name',function(newValue,oldValue, scope){ console.log(newValue); console.log(oldValue); }); $timeout(function(){ $scope.name = "world"; },1000);
 
 
$watch性能问题
太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。
$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：
var watch = $scope.$watch('someModel.someProperty', callback);
//...
watch();
 
还有2个和$watch相关的函数：
$watchGroup(watchExpressions, listener);
$watchCollection(obj, listener);
 
插值字符串
要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。
$interpolate服务是一个可以接受三个参数的函数，其中第一个参数是必须的。
1. Text：包含字符串插值标记的字符串。
2. mustHaveExpression：如果这个参数设为true，当传入的不含表达式时会返回null。
3. trustedContext：angularjs会对已经进行了字符插值操作的字符串通过$sec.getTrusted方法进行严格的上下文转义。
例子本地测试无效！

angular的基本要点的更多相关文章

  1. Angular 快速学习笔记(1) -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...

  2. angular 指令 要点解析

    指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict  =  'AECM'  分别指该指令标识位于 attribute属性: < ...

  3. Angular 2 + 折腾记 ：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

    前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先须要操作表单的模块引入这两个模块. import { FormsModule, ReactiveFormsModule } ...

  4. TypeScript: Angular 2 的秘密武器（译）

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  5. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  6. 自定义Angular插件 - 网站用户引导

    最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所 ...

  7. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  8. Java Web编程技术学习要点及方向

    学习编程技术要点及方向亮点: 传统学习编程技术落后,应跟著潮流,要对业务聚焦处理.要Jar, 不要War:以小为主,以简为宝,集堆而成.去繁取简 Spring Boot,明日之春(future of ...

  9. Angular 2.0 的设计方法和原则

    转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从 ...

随机推荐

  1. delphi取括号内或括号外的内容

    function TSetParkForm.RemoveSgin(str: string): string; // 去掉括号内的内容(包括括号) var i1, i2, i: integer; beg ...

  2. 验证码-WebVcode

    验证码的实现 <img src="../Common/WebVcode.aspx" title="看不清?点此更换" alt="看不清?点此更换 ...

  3. hibernate的获取session的两方法比较，和通过id获取对象的比较，一级缓存二级缓存

    opensession与currentsession的联系与区别 在同一个线程中opensession的session是不一样的,而currentsession获取的session是一样的,这就保证了 ...

  4. 【转】android 手势识别和VelocityTracker

    参考地址: http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1020/448.html http://www.jcodecraeer.co ...

  5. LOJ#10065. 「一本通 3.1 例 2」北极通讯网络

    题目链接:https://loj.ac/problem/10065 题目描述 原题来自:Waterloo University 2002 北极的某区域共有 nnn 座村庄,每座村庄的坐标用一对整数 ( ...

  6. 【连载】redis库存操作，分布式锁的四种实现方式[四]--基于Redis lua脚本机制实现分布式锁

    一.redis lua介绍 Redis 提供了非常丰富的指令集,但是用户依然不满足,希望可以自定义扩充若干指令来完成一些特定领域的问题.Redis 为这样的用户场景提供了 lua 脚本支持,用户可以向 ...

  7. sklearn的train_test_split函数

    train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. from sklearn.model_selection import ...

  8. 【bzoj2140】: 稳定婚姻 图论-tarjan

    [bzoj2140]: 稳定婚姻 哎..都是模板题.. 一眼看过去 哇 二分图哎 然后发现好像并不能匈牙利算法 自己xjb画两张图,发现二分图左向右连配偶的边,然后右向左连交往过的边 然后如果Bi G ...

  9. 基于SSH协议clone GitHub远端仓库到本地-git

    经常逛 GitHub 的可能都知道,在 clone 远端仓库的时候,会有两个选项,如下图: 首先我们来说明一下两种方式的区别. 使用 HTTPS url 克隆对初学者来说会比较方便,复制HTTPS u ...

  10. Docker - CentOS 安装 Docker 和 Docker-Compose

    目录 介绍 Docker Docker-Conpose 安装 Docker CE 系统要求 使用 YUM 安装 配置加速器 安装 Docker-Compose 介绍 Docker Docker 是一个 ...