首页 > 代码库 > 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 基础