Smart-angular NPM

smart-angular

angularjs version 1.x template smart-angular是一套基于angularjsv1.x的打包部署工具，主要作用是可以使用类似.vue文件的写法写.controller,.service,.directive文件还有css文件，支持包括less, scss，sass, css的打包和部署工作。

1.安装 全局安装 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文件的使用. <config injector=“$scope" params=“/:id”>

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文件夹下。