Angular入门

Angular简介

Angular是一个开发平台，它能帮助你更轻松的构建web应用。Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular为开发者提升构建web、手机或桌面应用能力。

AngularJS和Angular框架对比：

AngularJs：是一个典型的MVC框架

Angular：是一个组件树

Angular项目的结构

1.用vscode建立的项目：

2.各个文件的作用：

e2e：端到端的测试
node_modules：第三方模块库
src：项目所有文件存在这里

-app:组件以及app.modules.ts定义跟模块；
-assets:静态资源
-environments:包含为项目准备的环境文件；
-index.html:主页面
-main.ts:应用的主要入口；
-polyfill.ts:填充库，将不同的点进行标准化；
-styles.css:进行全局样式
-test.ts:单元测试的入口点；
-tsconfig.app.json:TypeScrip编辑器的配置文件；
-tyconfig.spec.json:同上；
.angular-cli.json：Angular CLI的配置文件
.editorconfig：编辑器简单的配置文件
.gitignore：Git的配置文件

Karma.conf.js：Karma的单元测试配置
package.json：npm配置文件，里面包含很多命令
protractor.conf.js：给Protractor使用的端到端测试配置文件，当运行e2e时会用到
tsconfig.json：TypeScript编译器的配置

Angular启动过程

1.根据.angular-cli.json文件找到启动加载页面(index.html)、启动加载脚本(main.ts)
2.根据main.ts脚本，找到应用的起点(AppModule)
3.根据app.module.ts找到模块的主组件(AppComoinents)
4.根据app.component.ts 编写页面内容
5.packge.json里面有启动web服务器等的命令
6.在浏览器地址栏输入http://localhost:端口号/，查看页面。

引用bootstrap、jQuery库

用Angular引用bootstrap、jQuery库，只需要在index.html中引用在线的bootstrap、jQuery库即可。

[index.html]
<span style="font-family:'KaiTi_GB2312';font-size:24px;"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->  
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
  </span>

小结：

关于Angular的知识会持续更新的。

原文地址：https://www.jb51.cc/angularjs/144482.html