首页 > 代码库 > Angular 基础
Angular 基础
安装
1.官网http://angularjs.org/下载安装
2.开源库http://www.bootcdn.cn/下载安装
Angular除了提供一些需要最新浏览器支持的功能外,同时提供以下标准功能:
- 依赖注入
- 模板
- 路由(@angular/router)
- AJAX(@angular/http)
- 表单(@angular/forms)
- 组件化CSS封装
- XSS保护
- 单元测试工具
功能丰富的好处就是你不需要额外费精力去挑选第三方的类库,然而,这也同样让你没得选择,即使你并不需要这些功能(最新发布的Angular4貌似已经意识到了这个问题)
MVC
MVC即“模型 - 视图 - 控制器”的简称,一种设计模式,MVC的从逻辑上将代码清晰地分割为三层,这样可以对每个部分进行独立开发、测试和维护。
-
模型/Model - 服务层(service)负责维护数据
-
视图/View - 展示层(diretive)负责将数据展现给用户
-
控制器/Controller - 控制层(control)负责控制Model和View之间的交互
应用场景
开发环境 <script src="http://www.mamicode.com/angular.js"></script>
angualr应用创建基本步骤
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <link rel="stylesheet" href="bootstrap.css"> 7 8 //link标记允许当前文档和外部文档之间建立连接,但是只能在head标签里面用 9 <script src="angular.js"></script> 10 </head> 11 <body> 12 {{1+1}} {{msg}} 13 <div id="box" ng-controller="oneCtrl"> 14 {{1+1}} {{msg}} 15 </div> 16 <script> 17 (function(){ 18 angular.module("demo",[]) 19 demo.controller("oneCtrl",function($scope){ 20 21 //学习中一般这样用 当代码上线压缩后 这段代码会有问题 22 23 demo.controller("myctrl"["$scope","$http"],function (scope,http) { 24 // 开发中要用的表达式 25 26 27 $scope.msg = "hello angular!" 28 }) 29 })() 30 </script>
从其他博客整理来的知识点
1.ng-app,ng-app="",ng-app="demo"三者的区别
答:ng-app有一个默认的模块。如果有多个ng-app,默认是加载第一个,而且只加载第一个。ng-app=“自定义的模块” 是一个使用了自定义的模块,该自定义的模块继承了那个初始的默认的模块,可以调用初始的默认的模块的方法第二者是第三者的特例。
2.为什么没有ng-app,也可以启动angular?
答:如果在当前的页面中包含有ng-app这个指令,angular会自动启动,如果不想在当前的页面中显示标识ng-app,我们可以代码的方式手动启动,即通过angular.bootstrap(document,["demo"])手动启动,等价于ng-app="demo";
3.angular.bootstrap(document.getElementById("box"),["demo"])的作用?
答:angular.bootstrap(启动位置,数组),启动位置:表示管理范围,数组:表示把数组中的当成启动模块
控制器之间的继承
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <link rel="stylesheet" href="bootstrap.css"> 7 <script src="angular.js"></script> 8 </head> 9 <body> 10 {{1+1}} {{msg}} 11 <div id="box" ng-controller="oneCtrl"> 12 {{1+1}} {{msg}} 13 </div> 14 <script> 15 (function(){ 16 angular.module("demo",[]) 17 .controller("oneCtrl",function($scope){ 18 $scope.msg = "hello angular!" 19 }) 20 angular.bootstrap(document,["demo"]); 21 angular.bootstrap(document.getElementById("box"),["demo"]); 22 })() 23 </script> 24 </body> 25 </html>
bootstrap插件使用官网上 http://getbootstrap.com查阅使用
以后仔细学过再来做笔记
Angular控制器
控制angular应用程序的数据。
控制器是JavaScript对象,构造函数
Angular模块
模块对应执行应用的HTML元素
模块可在angular 应用中添加控制器,指令,服务等。
Angular scope(作用域)
作用域是在应用在HTNL(视图)和JS(控制器)之间
当angular创建控制器时可以将$scope对象当做参数传递
scope是一个对象,有可用方法和属性
简单的理解:$scope 局部作用域
$rootscope 全局作用域
Angular scope 事件
ng-click/dblclick 点击/双击
ng-mouseover/out
ng-keydown/up
ng-focus/blur 获取焦点
ng-submit
Angular 指令
指令 是扩展HTNL 为内置的指令来为应用添加功能 带有前缀 ng-
ng-init 初始化应用程序数据
ng-model 绑定到应用程序(比如输入的域的值)
ng-repeat 对于集合中(数组中)的每个项 克隆一次HTML元素( 指令用于循环输出指定次数的 HTML 元素)
1 <!doctype html> 2 <html lang="en" ng-app="zidingyi"> 3 <head> 4 <meta charset="utf-8"> 5 <title>repeat</title> 6 <meta name="keywords" content=""> 7 <meta name="description" content=""> 8 <script src="angular.min.js"></script> 9 </head> 10 <body> 11 <ul ng-controller="myctrl"> 12 <li ng-repeat="persen in data"> 13 <!-- 循环(for in 循环) --> 14 <span>年龄:{{persen.name}}</span> 15 <span>年龄:{{persen.age}}</span> 16 <span>年龄:{{persen.score}}</span> 17 </li> 18 </ul> 19 <script> 20 var app=angular.module("zidingyi",[]) 21 app.controller("myctrl",function ($scope) { 22 $scope.data=[ 23 {"name":"张三","age":22,"score":98}, 24 {"name":"李四","age":23,"score":70}, 25 {"name":"王五","age":28,"score":90}, 26 {"name":"赵六","age":31,"score":100} 27 ]; 28 }) 29 </script> 30 </body> 31 </html>
运行结果
Angular 基础