AngularJS快速入门

AngularJS.1.0快速入门

目录

1.简介

2.基本编写结构

3.基本语法及基础结构组成

1.简介

AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。

AnuglarJS是前后端分离软件架构模型下，前端业务处理的解决方案！

总之，AngularJS是web前端很厉害的一种编程框架之一

常用资源社区/网站http://docs.angularjs.org

http://www.angularjs.cn/

Angular官网上提供源代码、代码/官方教程/官方开发向导/API文档等

方便自主学习！

2.基本编写结构

蓝色字体标示表示与原生JS结构区别

字体加粗部分为注释

案例一：实现一个购物车中更新数据的功能

功能要求：修改购买数量，在修改的同时，商品的小计购买金额发生变化。

ng-app>

    

    

     

    ng-init="count=1;price=144">

        单价：{{price}}

        购买数量：ng-model="count">

        小计金额：{{ price * count }}

    

案例一解析：

程序运行顺序：

1.从入口属性ng-app(指令)开始加载应用，并逐行编辑解释这些扩展的内容。

2.遇到input标签中的属性ng-model(指令)，就会将它的值当成一个变量进行处理

3.遇到{{}}这样的结构，就会将括号中的值当成表达式进行处理

注：{{}} 为mustache语法，通过两个大括号来包含一个表达式的结构Angular会对mustache语法进行编译并解释成可以运算的表达式进行处理

AngularJS优势：

1.数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块

2.AngularJS就是因为对传统的HTML进行了功能的扩展，所以在一定程度上，实现了软件开发过程中前后端的架构级别的分离——也就是软件前后端分离架构模型。

同时将前端的内容展示、业务功能处理、数据交互有组织的进行了规划，让前端HTML更加适合如今的企业级平台的web软件开发。

3.基本语法及基础结构组成

1.结构代码组成如下：

蓝色字体标示表示与原生JS结构区别

字体加粗部分为注释

代码：

ng-app="myApp"> -----------》 1,2

    

    

    src="js/angular.min.js">

ng-controller="myCtrl" ng-init="count=1">  ------------------》 6     

{{name}}   ------------------》7  

{{count}}  ------------------》 8

 ng-bind="name">

 ng-bind="count">

注：数字1~8为程序解析顺序

1. HTML自定义属性 ng-app属性

 作用：用于启动AngularJS应用程序

2. AngularJS号称模块化，组件化项目开发的框架

    模块/组件：积木

    根模块：通过ng-app的属性值来指定【指定的是名称】--指定了一个myApp的模块

3. 定义模块 

4. 定义控制器 

5. 控制器的参数$scope 是不需要传递数据的，AngularJS会自动给它赋值

   $scope上可以挂在数据，用于当前控制器的范围

6. 基础语法：通过ng-controller来将控制器和对应的标签绑定

    定义好了控制器的作用范围【开始标签~结束标签之间】

7.基础语法结构：

        mustache语法~ 通俗的说，就是双大括号！用于输出变量的数据、进行数据的运算等等

        但是mustache语法，由于加载如果缓慢的情况会出现直接将大括号打印到页面上的问题

        所以通常项目开发时，使用ng-bind来代替即第二种页面输出方式

 8. ng-init这个东西，主要用来在标签中初始化一些变量数据【不推荐】