angular.js

最新推荐文章于 2022-01-18 15:33:18 发布

摩羯的成长期

最新推荐文章于 2022-01-18 15:33:18 发布

阅读量483

点赞数

分类专栏： angular.js

本文链接：https://blog.csdn.net/weixin_42603009/article/details/94382945

版权

angular.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

安装请参考：（angular中文官网）
https://angular.cn/guide/setup-local

如果有vue的概念，理解angular.js应该会很容易，组件的概念（下一份工作要用提前看你一眼，细致的之后再总结）。
参考文档有两点：https://angular.cn/guide/setup-local和官网文档（vue也是如此）。
分析一个helloword程序：(AngularJS的也是双向数据绑定。)
html：

<!doctype html>
<html ng-app> <!--当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用： -->
<head>
<!-- 首先引入AngularJS的头文件。-->
	<script 		src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">		</script>
  </head>
<body>
<div>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <hr>
  <!-- 指令ng-model将<input>输入的值绑定到了变量yourname。取值用法同Vue。-->
  <h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

生命周期钩子：
在这里插入图片描述
AngularJS 模块（https://www.angularjs.net.cn/）这个网站可以查看下面所有。
模块名描述
ng
AngularJS的默认模块，包含AngularJS的所有核心组件。

ngRoute
AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。ngRoute即是AngularJS的路由模块。

ngAnimate
AngularJS的动画模块，使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用css或者JavaScript回调函数。

ngAria(不是很重要)
使用ngaria为指令注入共同的可达性属性和提高残疾人用户体验。

ngResource
当查询和发送数据到一个REST 服务器时，使用ngResource模块。

ngCookies
ngCookies模块提供了一个方便的包用于读取和写入浏览器的cookies。

ngTouch
ngRoute模块提供触摸事件，方便的应用于移动触摸设备。它的实现是实现是基于jQuery移动触摸事件处理。

ngSanitize
ngSanitize模块可安全地在你的应用程序中解析和操作HTML数据。

ngMessages
AngularJS表单验证模块。ngMessages模块完美的实现了很多表单验证的常用功能，简化你的开发流程。

先搞定它是怎么启动的：
先看看package-lock.json和angular.json文件中的内容：（是一些默认的配置）
“name”: “test”//项目名称；
“root”: “src”,/指向的是angular应用启动时从哪个目录找资源,默认指向src目录/
“assets”: /资源目录/
“index”: “index.html”,/* index指向Angular应用启动时加载的页面默认指向src目录中index.html*/
“main”: “main.ts”,/* main属性指向Angular应用启动时加载的脚本默认指向src目录中的main.ts*/
重点关注：
root属性指向的是angular应用启动时从哪个目录找资源,默认指向src目录
index指向Angular应用启动时加载的页面默认指向src目录中index.html
main属性指向Angular应用启动时加载的脚本默认指向src目录中的main.ts

由此可知道，最开始启动运行时是加载了index.html这个页面，执行了main.ts这个脚本。

/*开发者模式的配置*/
import { enableProdMode } from '@angular/core';
/*告诉Angular使用哪个模块启动应用*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
/*导入主模块*/
import { AppModule } from './app/app.module';
/*倒入环境配置*/
import { environment } from './environments/environment';

/*如果是生产环境  关闭开发者模式*/
if (environment.production) {
  enableProdMode();
}

/*程序的起点，整个程序就是从这里运行的，AppModule指向的是/app/app.module，
也就是说程序启动时会去加载/app/app.module这个文件*/
platformBrowserDynamic().bootstrapModule(AppModule);

main.ts告诉Angular主模块是AppModule,Angular也就知道了去加载AppModule。
之后就是index.html页面下面的内容加载组件

<app-root></app-root>

完整的过程：
首先访问路径（port可修改）在cmd命令中，去到项目的路径下输入：ng serve --open项目启动。
在这里插入图片描述
完整的路径：（上传时出现了bug，一直不让上传所以变小了很多）
特此说明文件名箭头顺序：angular.json，index.html，main.ts，app.module.ts，app.component.ts，app.component.html，index.html。（特别说明，在index.html中app-root命令之间加入了一个跳转中，这样更加方便理解后面的组件加载过程）
在这里插入图片描述
开发中，路由定义处：（暴露给了app.component.ts统一管理，在pp.component.ts中BrowserModule 提供了启动和运行浏览器应用的那些基本的服务提供商。）