proudsmart smart-angular
npm install smart-angular1.安装
全局安装 npm i smart-angular@latest -g,通常用于部署打包阶段打包文件。(部署阶段使用)
局部安装 npm i smart-angular@latest 通常用于开发阶段和本地调试。(推荐安装调试使用局部安装)
c) 注意:局部安装之后需要手动在package.json的script下添加smart-angular : “smart-angular”属性,后面可通过npm run smart-angular 加方法来进行调用
2 创建一个项目
在安装目录下执行命令行
smart-angular init “项目名”(全局安装情况下),
npm run smart-angular init “项目名”(局部安装情况下)
会得到如下文件目录,这个就是我们的项目:
ps-项目名
— controllers / controller 文件存放位置 /
|— test.controller
— directives / directive 文件存放位置 /
|— test.directive
— services / service 文件存放位置 /
|— test.service
— styles / css样式 文件存放位置 /
| — test.less
3安装所需依赖
npm i angular,requirejs,ps-require,angular-ui-router@latest
4,预览与打包
预览之前需要1)通过smart-angular pack项目名 打包文件,或2)者直接执行smart-angular server启动一个本地环境的服务器来进行浏览。
在本地服务器环境打开 ps-项目名/index.html 可进行预览。
4controllers
controllers主要用于页面路由,每一个.controller文件的文件名都对应一个路由,如test.controller我们可以通过/ps-leon/index.html#/test访问到,test-service.controller可以通过/ps-leon/index.html#/testService(驼峰命名)访问到, 并且不区分其是否所属某个文件夹,路由的名称只对应文件名的驼峰命名.
5,controller, .service, *.directive文件的使用.
{{n}}
1),config标签
injector参数后面收入依赖注入的内容和原本angularjs1.x没区别, params是路由参数也和原版angularjs1.x设置方法相同。
2),template标签
此路由对应页面所使用的模版对应angular-ui-router的template里面的内容。
3).script标签
js的具体写法实现。
4).style标签
页面样式,当增加scoped属性后为局部区域内的样式,lang属性定义这一区块使用less,sass哪一种方法书写css
5).directive,service的书写与controller遵循相同的规则。
6,其他命令:( 以全局安装为主,局部安装在前面加npm run );
smart-angular controller a b为一个已经存在的项目a添加一个controllers/b.controller;
smart-angular directive a b为一个已经存在的项目a添加一个directives/b.directive;
smart-angular service a b为一个已经存在的项目a添加一个services/b. service;
smart-angular pack project 打包一个名为project下的所有文件,并分开放置,放到build文件夹下。
smart-angular pack “project/output” 打包一个名为project下的所有文件并合并到一个名为output.js的文件并放到build文件夹下。(项目中除非发布工具,通常不建议使用)
smart-angular pack “project/controllers” 打包一个名为project下的所有controllers文件并合并到一个名为controllers.js的文件并放到build文件夹下。
smart-angular pack “project/directives” 打包一个名为project下的所有directives文件并合并到一个名为directives.js的文件并放到build文件夹下。
smart-angular pack “project/services” 打包一个名为project下的所有services文件并合并到一个名为services.js的文件并放到build文件夹下。
smart-angular pack “project/controller/test” 打包一个名为project下的controllers文件内名为test.controller的文件到build文件夹下。