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,双向数据绑定(类似...

Angularjs 学习笔记(一)基础

1.简介: Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 Ang...

3天学习完AngularJS基础内容小结

简介:AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。一、AngularJS大致功能模块二、页面交互变得简单1、示例:计算价格 ...

web学习笔记11-angularjs指令基础学习

指令基础学习

AngularJS 中文版 入门 基础 教程

  • 2014年07月23日 14:05
  • 2.99MB
  • 下载

angularJs基础(2-6)

  • 2017年02月04日 16:12
  • 320KB
  • 下载

AngularJS入门:01-基础

一、Angular简介 AngularJS*是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。 Angular ...

angularJs基础(1)

  • 2017年02月04日 16:10
  • 62KB
  • 下载

AngularJS表单基础

原文作者:大漠穷秋 原文地址:http://damoqiongqiu.iteye.com/blog/1920191 实例   HTML代码:   ...
  • jliqing
  • jliqing
  • 2015年11月23日 13:23
  • 129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS基础学习
举报原因:
原因补充:

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