首页 > 代码库 > Angular 基础

Angular 基础

2024-09-24 14:23:20   219人阅读

安装

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 基础


联系
我们