文档章节

AngularJS学习笔记(1)

os_chen
 os_chen
发布于 2015/10/21 16:55
字数 476
阅读 27
收藏 4


一、AngularJS 是什么

    1.前端 JS 框架 

    2.为了克服HTML在构建应用(app)上的不足而设计的

    3.已收归 Google


二、AngularJS 的特点

    1.MVVM (Model-View-ViewModel)

    2.模块化

    3.双向数据绑定

    4.语义化标签

    5.依赖注入


三、AngularJS 怎么写

    0.从一个 AngularJS 实例开始   


<div ng-app="myApp" ng-controller="myCtrl">
    First name: <input type="text" ng-model="firstName"><br>
    Last name: <input type="text" ng-model="lastName"><br>
    <br>
    Name: {{firstName + " " + lastName}}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "Jackie";
        $scope.lastName= "Chan";
    });
</script>

    

     1.指令

    (1)在实例中,

        ng-app 指令初始化一个 AngularJS 应用程序。

        ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

         ng-controller 指令定义了应用程序控制器。

    (2)指令 是以 ng- 作为前缀的 HTML 属性;

    (3)AngularJS 通过指令来扩展 HTML。


    2.表达式

        (1)表达式写在双大括号内:{{ expression }}

        (2)表达式把数据绑定到 HTML,表达式书写的位置将会"输出"数据。

        (3)所有表达式都在其所属的作用域内部执行,并有访问本地 $scope 的权限。

        (4)表达式可以包含文字、运算符和变量,但不允许任何流程控制功能(条件判断,循环及异常)。

        (5)表达式支持过滤器。


    3. 模块(Module)

        (1)模块定义了 AngularJS 应用

        (2)定义一个模块:

     

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

          

            angular.module() 方法接受两个参数:1.模块的名称,2.依赖列表 。


    4.控制器(Controller)

        (1)控制器用于控制 AngularJS 应用

        (2)定义一个控制器: 

    

    app.controller('myCtrl', function($scope) {
        $scope.firstName= "Jackie";
        $scope.lastName= "chan";
    });

            

        (3) AngularJS 使用 $scope 对象来调用控制器。

        (4)控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象

        (5)控制器支持套嵌:


    <div ng-controller="ParentController">    
        <div ng-controller="ChildController">
            //...
        </div>
     </div>


(未完待续)



© 著作权归作者所有

os_chen
粉丝 0
博文 3
码字总数 2063
作品 0
广州
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
196
0
Angular 5 升级至Angular 7

根据升级建议,应该先从Angular 5升级至Angular 6,再从Angular 6升级至Angular 7。 本文内容“升级前-升级”适用于想从Angular 5升级至Angular 6的小伙伴; 本文内容“升级后”适用于想从A...

Hermy
2018/12/20
0
0
2017-03-01

学习内容:angular.js module模板定于服务provide 多个控制器数据共享 过滤器及练习 完成内容:学习内容及笔记详细 工作问题:关于angular.js之前在做签到抽奖项目的时候遇到 获取数值及方式...

Full_Session
2017/03/01
2
1
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
3.5K
0
高手问答第 143 期 — 重新认识前端开发利器 Angular

OSCHINA 本期高手问答(2017 年 2 月 28 日 — 3 月 6 日)我们请来了 @大漠穷秋 为大家解答 Angular 相关的问题。 @大漠穷秋 章小飞,Google Angular developers PM,目前负责 Angular 在国...

局长
2017/02/27
7K
54

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
10分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
10分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
36分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
38分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部