AngularJS[1]诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，
AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
MVVM：当M发生变化的时候，视图就发生变化,视图发生变化，M也会发生变化，双向数据绑定
M : Model(数据模型：整型、浮点型、对象)，数据看不到，需放到标签里展示
V：View(视图)
MVC:
C: controller控制数据如何作用，主要是写业务逻辑的
简述：
input(V) -->value 变化 -->name(M) -->p(V)变化
绑定name 绑定name作为interHTML
语义化标签：自定义标签
一个简单的购物车功能的实现：
1.点击左侧按钮可以切换右侧分类展示
2.购物车根据选择的商品计算价格
3.所有数据在数据库里返回
一、引入bootstrapmin.css和angular.min.js文件，地址这边不做详细介绍
二、模块的创建
ng-app:用于定义一个应用程序。有且只能有一个ng-app出现。
<html lang="en" ng-app="shop">创建模块
//模块（moudel）//我们通过angularjs提供的全局函数去创建模块//什么是全局函数？在angularjs中angular是一个全局对象，定义在全局对象中的函数就是全局函数。我们可以使用全局对象angular去调用全局函数。//如果我们使用ng-app指令定义了一个应用程序，我们必须创建一个与之同名的模块，便于我们后续的开发。var app = angular.module("shop",[]);三、自定义指令
//carInfo:I必须大写，在html里面当成标签引入写成car-info,引入方法多种，但建议这种，简单方便app.directive("carInfo",function(){ return { // restrict:"CAEM", //限定你的使用形式 C代表class， A代表属性 ， E代表标签形式， M代表注释形式。默认支持A // replace:false, //如果想让M形式生效，需要把replace设置为true // transclude:true, // template:"<div class='navbar-right'><div class='navbar-text'><span ng-transclude></span><b>你的购物车</b>3件,总计288<a href='#checkout' class='btn btn-default btn-sm navbar-btn'>查看</a></div></div>", templateUrl:"template/carInfo.html" }})//carinfo.html文件内容<div class="navbar-right"> <div class="navbar-text"> <b>你的购物车</b>3件，总计288 <a href="#checkout" class="btn btn-default btn-sm navbar-btn">查看</a> </div></div>四、模块化管理
ng-controller:用于定定义一个模块，控制这块模块所有代码的功能
<!-- mainCtrl(名字可以自定义):可以控制body里面的所有代码，将其要做的东西写在mainCtrl里面--><!-- 如何跟body建立关联？看app.js --><body class="container-fluid" ng-controller="mainCtrl">data:请求的php文件里返回的内容，status：状态码，成功是为200
config:配置的一段代码，header:头部
// 与body建立关联// $scope不可更改，是每个控制器自带的一个对象，意思是作用域，主要作用是可以添加属性和方法// app.controller("mainCtrl",function($scope,$http){// $scope.name = "导航";// })app.controller("mainCtrl",function($scope,$http){ $http({method:"GET",url:"php/getProducts.php"}).success(function(data,status,config,header){ // console.log(data); // console.log(status); // console.log(config); // console.log(header); $scope.products = data; //将返回的数据赋给控制器里面的products(名称可自定义)})php：表名product
<?php $mysqli = new mysqli("localhost","root","","php");if ($mysqli->connect_errno) { die($mysqli->connect_error);}$mysqli->query("set names utf8");$sql = "SELECT *FROM product";$result = $mysqli->query($sql);if ($result->num_rows) { //得到的是一个包含了所有商品的大数组 $data = $result->fetch_all(MYSQLI_ASSOC); echo json_encode($data); //转化为json字符串,键值对的形式}$mysqli->close(); ?>
Angular指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
app.controller("mainCtrl",function($scope,$http){
$scope.name = "导航";
})
service下面的对象可以放在（）里面用
