AngularJS基础学习

原创 2016年08月28日 17:32:40

1.AngularJS的历史

  AngularJS是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行的。它的目标是通过MVC模式(MVC)功能增强基于浏览器的应用,使开发和测试变得更加容易。AngularJS是由Google的员工Miško Hevery从2009年开始着手开发,版本1.0是在2012年发布的。

 

2.AngularJS的运行原理

  利用AngularJS,开发者可将页面的一部分封装为一个应用,并且不强迫整个页面都使用AngularJS进行开发。这个特质在某些情况下非常有用,比如你的工作流程中已经包含了另外一个框架,或者你只希望页面中的某一部分是动态的,而剩下的部分是静态的或者是由其他JavaScript框架来控制的。

  当在页面中通过<scriptsrc="lib/angular/angular.js"></script>引入Angular.js库时,这行代码载入Angular.js脚本,Angular.js中有自执行的函数。Angular.js脚本运行后会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域,然后Angular会找ng-app所属标签下所有的Angular指令。说到底,Angular.js是根据页面上各种Angular指令去操作HTML元素,最终显示给用户的动态的HTML页面。

 

3.AnguarJS的几大特性:

1MVC

2)模块化

var myModule = angular.module("HelloAngular", []);
myModule.controller("helloAngular", ['$scope',
    function HelloAngular($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

如上代码解析:

>>angular.module("HelloAngular", [])用来定义一个Angular模块,那么可以基于这个模块定义很多东西,例如controller等等,这样就避免将controller写到全局作用域中,污染全局作用域。

>>myModule.controller()在模块中定义一个controller,第一个是控制器的名称,第二个参数是一个数组,第一个$scope表示的是让AngularJS依赖注入$scope$scope后面的controller的定义。

 

在开发AngularJS的应用时,首先想到的Module,因为controllerfilter,directive等等都是挂载Angular模块下面的。一切都是从Module开始。一个module是由controllerfilterdirectivemodel等等组成的,是一个功能的组合。

3)指令系统

//HelloAngular_Directive.js

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hieveryone!</div>',
        replace: true
    }
});

//index.html

<!doctype html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
</head>
<body>
    <hello></hello>
</body>
<scriptsrc="js/angular-1.3.0.js"></script>
<scriptsrc="HelloAngular_Directive.js"></script>
</html>

备注,在html视图中,<hello></hello>会被替换成<div>Hieveryone!</div>

4)双向数据绑定

单向数据绑定示意图:


双向数据绑定示意图:


(5)依赖注入

(6)service

(7)Filter


总结来说:



版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

AngularJS之一基础学习

前言: angularJS以node为主的js页面的mvvm框架四大特性: 1,mvc(很简单,model–view–controller) 2,模块化 3,指令系统 4,双向数据绑定(类似...

一篇告诫正在学习以及将要学习计算机的同学的文章【找不到原作者及出处非常抱歉】

我始终认为,对一个初学者来说,IT界的技术风潮是不可以追赶的,而且也没有能力去追赶。 我时常看见自己的DDMM们把课本扔了,去卖些价格不菲的诸如C#, VB.Net 这样的大部头,这让我感到非常痛心。...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

记录学习第一天-c#

方法的内容要单一 方法最忌讳的就是提示用户输入信息  用户输入信息应该在Main()方法中写 使用out参数 当使用一个方法时 需要返回多个相同类型的值时 可以考虑使用数组 当时当方法需要返回多...

正则表达式(Regex)

定义:是指一个用来描述或者匹配一系列符合某个语法规则字符串的字符串 ,其实就是一种规则。、 字符类:   []代表单个字符            &...

多态

多态           里氏转换原则:              &#...

从零开始的spring mvc,spring mvc简单配置

首先,先新建一个web项目,然后在lib文件夹下加入相应的spring jar 包,我所建的web项目结构如下  之后就配置web.xml文件信息 在配置web.xml 中前置控制器的必须与的...

记录基础学习第二_小项目_飞行棋小游戏

飞行棋项目:          1.游戏头(要求每一个句子显示不同的颜色 )  //这里用到了Console类中的ForegroundColor属性 取值是枚举类型ConsoleColor中的值 &#...

angularJs学习笔记

ng-app 指令定义一个 AngularJS 应用程序。指令告诉 AngularJS, 元素是 AngularJS 应用程序 的"所有者"。ng-app 指令初始化一个 AngularJS 应用...

AnglarJs 依赖注入

一、概念     1.1 概念    一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。    //  个人理解:类似Andr...

java基础第二天

1.char 占用2个字符 用”来表示 2.\ 表示 斜杠 \’表示单引号 3.boolean 只有两个 true false 来表示 4.声明变量 int age; char ‘s’ ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)