黑马程序员技术交流社区

标题: 【郑州校区】bos项目笔记之chapter05_系统分析、环境搭建(1) [打印本页]

作者: 谷粒姐姐    时间: 2018-3-19 11:55
标题: 【郑州校区】bos项目笔记之chapter05_系统分析、环境搭建(1)
本帖最后由 谷粒姐姐 于 2018-3-19 12:03 编辑

一、 前端系统环境搭建
将 “新 BOS 项目资料_chapter05_01 BOS 前端系统初始化项目” 项目导入开发工具   将 bos_fore 项目 复制 git 版本控制目录  
Import 项目  
运行项目,分析项目需求功能   配置启动端口  
1、 用户注册、登录  
2、 用户下单、快件查询  
3、 个人账户管理功能
4、 活动促销列表展示  
二、 AngularJS 使用入门
1 什么是 AngularJS  
最为核心: MVVM、模块化、自动化双向数据绑定、依赖注入、内部指令、语义化标签  
官网: https://docs.angularjs.org/
安装文件 angular-1.5.8.zip  
开发如果使用 angular 最基本功能,只需要导入 angular.js  
从 angularJS 1.2 版本后,路由功能 js 被单独分离
2 AngularJS 快速编程入门  
参见“AngularJS 权威指南.pdf”
  
2.1 AngularJS 双向数据绑定  
1、 在页面中引入 angular 的 js  
2、 Angular 常用属性  
         ng-app 在任何元素上使用,代表 angular 应用作用域           ng-controller 指定控制器           ng-model 指定模型  
         ng-bind 或者 {{属性名}} 进行属性取值 用于显示  
什么是双向数据绑定?  
更新模型,视图会自动更新, 更新视图,模型会自动更新  
2.2 AngularJS 基于模块化实现 MVC 案例  
在 AngularJS 的 1.3 Beta15 版本之前,可以定义全局控制器  
         <body ng-app ng-controller=”控制器方法名”>  
在 AngularJS 的 1.3 Beta15 版本后,使用控制器,必须要指定模块  
         <body ng-app=”模块名” ng-controller=”控制器方法名”>

         Controller 控制器 是 js 代码  
         Model 模型 是 name 属性  
         View 视图 是 {{name }}
2.3 AngularJS 事件绑定  


2.4 AngularJS 集合数据遍历显示  



2.5 AngularJS 路由使用(页面架构
什么是 Angular 的路由机制?
  
了解 AngularJS 路由机制思想  
1、 在项目中 引入 angular-route.js  
2、 编写页面布局, 将 AngularJS 加载变化部分 div,指定 ng-view  
3、 编写 Angular 路由配置 routeProvider  

bos项目笔记之chapter01_系统分析、环境搭建(1)
bos项目笔记之chapter01_系统分析、环境搭建(2)
bos项目笔记之chapter01_系统分析、环境搭建(3)
bos项目笔记之chapter01_系统分析、环境搭建(4)
bos项目笔记之chapter02_系统分析、环境搭建(1)
bos项目笔记之chapter02_系统分析、环境搭建(2)
bos项目笔记之chapter03_系统分析、环境搭建(1)
bos项目笔记之chapter03_系统分析、环境搭建(2)
bos项目笔记之chapter04_系统分析、环境搭建(1)
bos项目笔记之chapter04_系统分析、环境搭建(2)
bos项目笔记之chapter04_系统分析、环境搭建(3)
bos项目笔记之chapter04_系统分析、环境搭建(4)

作者: sunshine5683    时间: 2018-3-19 18:04
很不错,学习了学习了




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2