Angular

Posted on 2022-03-23 10:53 董锡振阅读(271) 评论(0) 编辑收藏举报

https://www.runoob.com/angularjs2/angularjs2-architecture.html
https://angular.cn/start

https://www.cnblogs.om/Qooo/p/13830897.html

前Angular有7个版本，分别为：Angularjs、Angular2、Angular4、Angular5、Angular6、Angular7、Angular8。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。
跳过3以避免由于路由器软件包版本的错位导致混淆
AngularJS四大特征
2.1 MVC模式 2.2 双向绑定 2.3依赖注入 2.4 模块化设计
3.1 表达式 1.语法格式：{{变量名}} 或者 {{对象.变量名}}
3.2 双向绑定语法格式：ng-model=”变量名” 或者 ng-model=”对象.变量名”
3.3 初始化指令语法格式：ng-init=”变量名=’变量值’; 变量名=’变量值’”
3.4 控制器定义模块语法格式：var 变量名 = angular.module(“模块名”, []);

3.9 复选框
l ng-true-value="true": 选中值

l ng-false-value="false": 未选中值

l ng-checked=”true|false”: 是否选中复选框
3.8 条件指令

语法格式：ng-if=”条件表达式”;

3.10 下拉列表框

l ng-options="元素变量.键 as 元素变量.键 for 元素变量in 数组"：选项值表达式绑定

l ng-selected=”true|false”: 是否选中下拉列表框指定的选项
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
/*定义myApp模块*/
var app = angular.module("myApp",[]);
/*将myAPP模块添加控制器*/
app.controller("myController",function($scope){
/*定义对象*/
$scope.list=[
{id:1,name:"haha"},
{id:2,name:"ssfd"},
{id:3,name:"sbdd"}
];
});
</script>
</head>
<body>
<div ng-app ="myApp" ng-controller="myController">
<select ng-model ="code" ng-options="city.id as city.name for city in list">
<option value="">请选择</option>
{{code}}
</select>
<br>
<select>
<option value="1">1</option>
<option value="2" ng-selected="true">2</option>
</select>

</div>
</body>
</html>
4.1 $http服务
4.1.2 $http.get()发送请求
4.1.3 $http.post()发送请求
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
/*定义myApp模块*/
var app = angular.module("myApp",[]);
/*将myAPP模块添加控制器*/
app.controller("myController",function($scope){
$scope.blur = function(){
alert($scope.x);
};
$scope.keyup = function(){
alert($scope.y);
};
$scope.add = function(){
$scope.count =parseInt($scope.x)+parseInt($scope.y);
};

});
</script>
</head>
<body>
<div ng-app ="myApp" ng-controller="myController">
x:<input type="text" ng-model="x" ng-blur="blur()"/></br>
y:<input type="text" ng-model="y" ng-keyup="keyup()"/></br>
<input type="button" value="计算" ng-click="add()" /> <br>
结果:{{count}} <br>
</div>
</body>
</html>

3.5 事件指令

l ng-click：单击事件

l ng-dblclick：双击事件

l ng-blur：失去焦点事件

l ng-focus：获取焦点事件

l ng-change：对应onchange改变事件

l ng-keydown：键盘按键按下事件

l ng-keyup：键盘按键按下并松开

l ng-keypress：同上

l ng-mousedown：鼠标按下事件

l ng-mouseup：鼠标按下弹起

l ng-mouseenter：鼠标进入事件

l ng-mouseleave：鼠标离开事件

l ng-mousemove：鼠标移动事件

l ng-mouseover：鼠标进入事件
————————————————

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
/*定义myApp模块*/
var app = angular.module("myApp",[]);
/*将myAPP模块添加控制器*/
app.controller("myController",function($scope){
/*定义数组*/
$scope.list = [10,20,30,40,50];
});
</script>
</head>
<body>
<div ng-app ="myApp" ng-controller="myController">
<ul ng-repeat="m in list">
<li>{{m}}</li>
</ul>
</div>
</body>
</html>
3.7 循环对象数组
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
/*定义myApp模块*/
var app = angular.module("myApp",[]);
/*将myAPP模块添加控制器*/
app.controller("myController",function($scope){
/*定义数组对象*/
$scope.list = [{name:"xiaoming",sex:"男",age:10},
{name:"sdfs",sex:"女",age:20},
{name:"sfg",sex:"man",age:24}];
});
</script>
</head>
<body>
<div ng-app ="myApp" ng-controller="myController">
<table>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
<th>age</th>
</tr>
<tr ng-repeat = "m in list">
<td>{{$index+1}}</td>
<td>{{m.name}}</td>
<td>{{m.sex}}</td>
<td>{{m.age}}</td>
</tr>
</table>
</div>
</body>
</html>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app ng-init ="name='xiaoming';user.sex='man';user.age=10 ">
name:<input type="text" ng-model="name" /></br>
sex:<input type="text" ng-model="user.sex" /></br>
age: <input type="text" ng-model="user.age" /></br>
name:{{name}} <br>
sex: {{user.sex}} <br>
age: {{user.age}} <br>
</div>
</body>
</html>

ng-app 指令定义了 Angular应用的根元素，在根元素的所有子元素中用到指令，angular会自动识别。
ng-app 指令在网页加载完毕时会自动初始化应用中的angular的指令
说明：ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;
1、有什么优势？
Angular 2+ 的最大优势在于它的流行程度通过对 Angular 1 进行现代化演变和重新构建框架，
Angular 2+ 对于用户来说它有一套用于构建用户界面的丰富组件，这也是少有的几个框架能够做到这点。
2、有什么弱点和挑战？
Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web 应用

需要注意的是 Angular1（angular.js）与 Angular2+ 是截然不同的，其中的应用、技术和经验不能直接移植到 Angular2+ 的开发中去

Angular 1.x 是基于 JavaScript的框架，而Angular 2 是基于 TypeScript的框架
Angular 2 是面向 mobile app 的架构，为了达到APP 原生的效果， Angular 2 特有引入了 NativeScript 技术
Angular 1写的代码无法用在Angular 2上，这是为什么？
var angular1 = angular
.module('uiroute', ['ui.router']);
angular1.controller('CarController', function ($scope) {
$scope.CarList = ['Audi', 'BMW', 'Bugatti', 'Jaguar'];
});
Angular 2 代码是基于 TypeScript 写的。 TypeScript与JavaScript 的区别大了去了。 TypeScript 是 JavaScript的超集（superset）。看一段 Angular 2 代码：
Angular 1 的MVC 架构， Angular 2 是一个典型的基于组件（component) 架构 Angular 4 比 Angular 2 更快
代码重用方法
在 Angular 1 中，最为常用的是 $scope 在 Angular 2和4中被去掉了。在新版本中，更多推崇的是 directive 和 controller, 通过对 component 组件的split（分割），从而实现代码的复用。

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "../app/app.component";
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core'
@Component({
selector: 'app-loader',
template: `
<div>
<div>
<h4>Welcome to Angular with ASP.NET Core and Visual Studio 2017</h4>
</div></div>
`
})
export class AppComponent{}

刷新页面返回顶部

上善若水

公告

Angular