前言:为了更好的学习,同时鞭笞自己,坚持写blog
关于AngularJS
AngularJS特性
Angularjs开发架构-MVC
- 起源:1979年,Trygve Reenskaug第一次正式提出了MVC模式
- Model:数据模型层
- View:视图层,负责展示
- Controller:业务逻辑和控制逻辑
- 好处:职责清晰,代码模块化
AngularJS核心--MVC模式
遵循MVC模式开发,鼓励视图、数据、逻辑组件间松耦合。
AngularJS核心-模块化
AngularJS推荐的应用模块组织方式
- 任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的
- 控制器、指令、服务、路由、过滤器分别放在一个模块里面。用一个总的app模块作为入口点,它依赖其它所有模块
AngularJS核心-依赖注入
待续
AngularJS核心思想-指令系统
待续
AngularJS核心思想-双向数据绑定
Hello AngularJS
利用bootstrap、AngularJS,写个简单Hello world:
<!DOCTYPE html> <html ng-app="exampleApp" > <head> <title>AngularJS Demo</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var myApp = angular.module("exampleApp",[]); myApp.controller("dayCtrl",function ($scope) { $scope.day = new Date(); $scope.hellowolrd = "Hello Wolrd!" }); </script> </head> <body > <div class="panel" ng-controller="dayCtrl"> <div class="page-header"> <h3>AngularJS App</h3> </div> <h4>{{hellowolrd}}</h4> <h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4> </div> </body> </html>
效果: