├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── config.js ├── config.yaml ├── gulpfile.js ├── karma.conf.js ├── package.json ├── public └── index.html ├── source ├── bootstrap.js ├── components │ └── .gitkeep ├── core │ ├── core-module.js │ └── core-router.js └── states │ └── home │ ├── home-controller.js │ ├── home-module.js │ ├── home-route.js │ └── home-template.html └── test ├── bootstrap.test.js ├── core └── core-module.test.js └── helper.js /.gitignore: -------------------------------------------------------------------------------- 1 | jspm_packages/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi": true, 3 | "esnext": true 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) [2015] [Albert Yu] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jspm Angular Demo 2 | 3 | 先全局安装 jspm： 4 | 5 | ``` 6 | $ npm install --global jspm 7 | ``` 8 | 9 | 接着克隆项目之后执行： 10 | 11 | ``` 12 | $ npm install 13 | $ jspm install 14 | ``` 15 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | "baseURL": "/", 3 | "transpiler": "babel", 4 | "babelOptions": { 5 | "optional": [ 6 | "runtime" 7 | ] 8 | }, 9 | "paths": { 10 | "*": "*.js", 11 | "npm:*": "jspm_packages/npm/*.js", 12 | "github:*": "jspm_packages/github/*.js" 13 | } 14 | }); 15 | 16 | System.config({ 17 | "map": { 18 | "angular": "github:angular/bower-angular@1.3.15", 19 | "angular-mocks": "github:angular/bower-angular-mocks@1.3.15", 20 | "angular-new": "npm:angular@1.4.0-rc.0", 21 | "angular-ui-router": "github:angular-ui/ui-router@0.2.13", 22 | "babel": "npm:babel-core@5.1.9", 23 | "babel-runtime": "npm:babel-runtime@5.1.9", 24 | "core-js": "npm:core-js@0.8.3", 25 | "text": "github:systemjs/plugin-text@0.0.2", 26 | "traceur": "github:jmcriffey/bower-traceur@0.0.87", 27 | "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.87", 28 | "github:angular-ui/ui-router@0.2.13": { 29 | "angular": "github:angular/bower-angular@1.3.15" 30 | }, 31 | "github:angular/bower-angular-mocks@1.3.15": { 32 | "angular": "github:angular/bower-angular@1.3.15" 33 | }, 34 | "github:jspm/nodelibs-process@0.1.1": { 35 | "process": "npm:process@0.10.1" 36 | }, 37 | "npm:angular@1.4.0-rc.0": { 38 | "process": "github:jspm/nodelibs-process@0.1.1" 39 | }, 40 | "npm:core-js@0.8.3": { 41 | "process": "github:jspm/nodelibs-process@0.1.1" 42 | } 43 | } 44 | }); 45 | 46 | -------------------------------------------------------------------------------- /config.yaml: -------------------------------------------------------------------------------- 1 | --- 2 | browserSync: &browserSync 3 | files: 4 | - "public/**" 5 | - "source/**" 6 | watchOptions: 7 | debounceDelay: 3000 8 | server: 9 | baseDir: "public" 10 | routes: 11 | "/config.js": "./config.js" 12 | "/jspm_packages": "./jspm_packages/" 13 | "/source": "./source/" 14 | middleware: [] 15 | startPath: "/" 16 | host: "127.0.0.1" 17 | port: 3000 18 | open: false 19 | # notify: false 20 | # online: false 21 | # tunnel: false 22 | # tunnel: "jspm-angular-demo" 23 | # logLevel: "info" 24 | # logPrefix: "jspm-angular-demo" 25 | # logConnections: false 26 | # logFileChanges: false 27 | 28 | # proxyURL: "http://your.endpoint.api/" 29 | # proxyOptions: &proxyOptions 30 | # route: "/api" 31 | # via: "nightire@localhost" 32 | # cookieRewrite: "hostname" 33 | # reserveHost: false 34 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var yaml = require('js-yaml'); 3 | // var _ = require('lodash'); 4 | var gulp = require('gulp'); 5 | // var proxy = require('proxy-middleware'); 6 | // var url = require('url'); 7 | var browserSync = require('browser-sync'); 8 | 9 | try { 10 | var options = yaml.safeLoad(fs.readFileSync('./config.yaml', 'utf-8')); 11 | } catch (error) { 12 | throw new Error(error); 13 | } 14 | 15 | var taskDependencies = (function() { 16 | gulp.task('server', function() { 17 | // var proxyMiddleware = proxy( 18 | // _.assign(url.parse(options.proxyURL), options.proxyOptions) 19 | // ); 20 | // options.browserSync.server.middleware.push(proxyMiddleware); 21 | browserSync(options.browserSync); 22 | }); 23 | 24 | return ['server']; 25 | }()); 26 | 27 | gulp.task('default', taskDependencies, function() { 28 | // Default Task Denifition 29 | }); 30 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Tue Apr 14 2015 15:13:59 GMT+0800 (CST) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: [ 14 | 'chai-as-promised', 15 | 'sinon-chai', 16 | 'mocha', 17 | 'jspm' 18 | ], 19 | 20 | 21 | // list of files / patterns to load in the browser 22 | // files: [], 23 | jspm: { 24 | serveFiles: [ 25 | 'source/**/*.{html,js}' 26 | ], 27 | loadFiles: [ 28 | 'test/**/*.js' 29 | ] 30 | }, 31 | 32 | 33 | // list of files to exclude 34 | exclude: [ 35 | ], 36 | 37 | 38 | // preprocess matching files before serving them to the browser 39 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 40 | preprocessors: { 41 | }, 42 | 43 | 44 | // test results reporter to use 45 | // possible values: 'dots', 'progress' 46 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 47 | reporters: ['mocha'], 48 | 49 | 50 | // web server port 51 | port: 9876, 52 | 53 | 54 | // enable / disable colors in the output (reporters and logs) 55 | colors: true, 56 | 57 | 58 | // level of logging 59 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 60 | logLevel: config.LOG_INFO, 61 | 62 | 63 | // enable / disable watching file and executing tests whenever any file changes 64 | autoWatch: true, 65 | 66 | 67 | // start these browsers 68 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 69 | browsers: ['Chrome'], 70 | 71 | 72 | // Continuous Integration mode 73 | // if true, Karma captures browsers, runs the tests and exits 74 | singleRun: false 75 | }); 76 | }; 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "jspm": { 3 | "directories": {}, 4 | "dependencies": { 5 | "angular": "github:angular/bower-angular@^1.3.15", 6 | "angular-mocks": "github:angular/bower-angular-mocks@^1.3.15", 7 | "angular-new": "npm:angular@1.4.0-rc.0", 8 | "angular-ui-router": "github:angular-ui/ui-router@^0.2.13", 9 | "text": "github:systemjs/plugin-text@^0.0.2" 10 | }, 11 | "devDependencies": { 12 | "babel": "npm:babel-core@^5.0.12", 13 | "babel-runtime": "npm:babel-runtime@^5.0.12", 14 | "core-js": "npm:core-js@^0.8.1", 15 | "traceur": "github:jmcriffey/bower-traceur@0.0.87", 16 | "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.87" 17 | } 18 | }, 19 | "devDependencies": { 20 | "browser-sync": "^2.5.3", 21 | "chai": "^2.2.0", 22 | "chai-as-promised": "^4.3.0", 23 | "gulp": "^3.8.11", 24 | "js-yaml": "^3.2.7", 25 | "karma": "^0.12.31", 26 | "karma-chai": "^0.1.0", 27 | "karma-chai-as-promised": "^0.1.2", 28 | "karma-chrome-launcher": "^0.1.7", 29 | "karma-jspm": "^1.1.4", 30 | "karma-mocha": "^0.1.10", 31 | "karma-mocha-reporter": "^1.0.2", 32 | "karma-sinon-chai": "^0.3.0", 33 | "mocha": "^2.2.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | Home 21 | 22 | 23 | -------------------------------------------------------------------------------- /source/bootstrap.js: -------------------------------------------------------------------------------- 1 | import CoreModule from 'source/core/core-module' 2 | 3 | angular.element(document).ready( 4 | () => angular.bootstrap(document, [CoreModule.name], { strictDi: true }) 5 | ) 6 | -------------------------------------------------------------------------------- /source/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightire/jspm-angular-demo/f27430c0f08cdccc2927accbde99dcddd12ce5dd/source/components/.gitkeep -------------------------------------------------------------------------------- /source/core/core-module.js: -------------------------------------------------------------------------------- 1 | import 'angular-ui-router' 2 | 3 | import HomeModule from 'source/states/home/home-module' 4 | import CoreRouter from 'source/core/core-router' 5 | 6 | export default angular.module('core', [ 7 | 'ui.router', 8 | 9 | HomeModule.name 10 | ]) 11 | .config(CoreRouter) 12 | -------------------------------------------------------------------------------- /source/core/core-router.js: -------------------------------------------------------------------------------- 1 | import HomeRoute from 'source/states/home/home-route' 2 | 3 | function CoreRouter($stateProvider) { 4 | $stateProvider 5 | // root 6 | .state('root', {url: '/'}) 7 | // Home 8 | .state('home', HomeRoute) 9 | 10 | // Session 11 | // .state('session', SessionRoute) 12 | // .state('session.signin', SessionSigninRoute) 13 | // .state('session.signup', SessionSignupRoute) 14 | } 15 | 16 | CoreRouter.$inject = ['$stateProvider'] 17 | 18 | export default CoreRouter 19 | -------------------------------------------------------------------------------- /source/states/home/home-controller.js: -------------------------------------------------------------------------------- 1 | class HomeController { 2 | constructor($filter) { 3 | this.$filter = $filter 4 | this.now = new Date() 5 | this.greeting = `你好，今天是：${this.time()}！` 6 | } 7 | 8 | time() { 9 | return this.$filter('date')(this.now) 10 | } 11 | } 12 | 13 | HomeController.$inject = ['$filter'] 14 | 15 | export default HomeController 16 | -------------------------------------------------------------------------------- /source/states/home/home-module.js: -------------------------------------------------------------------------------- 1 | export default angular.module('home', []) 2 | -------------------------------------------------------------------------------- /source/states/home/home-route.js: -------------------------------------------------------------------------------- 1 | import HomeTemplate from './home-template.html!text' 2 | import HomeController from './home-controller' 3 | 4 | var HomeRoute = { 5 | url: '/home', 6 | template: HomeTemplate, 7 | controller: HomeController, 8 | controllerAs: 'home' 9 | } 10 | 11 | export default HomeRoute 12 | -------------------------------------------------------------------------------- /source/states/home/home-template.html: -------------------------------------------------------------------------------- 1 | 返回 2 |

3 | -------------------------------------------------------------------------------- /test/bootstrap.test.js: -------------------------------------------------------------------------------- 1 | import 'test/helper' 2 | import 'source/bootstrap' 3 | 4 | describe('［应用］：Angular Application 手动初始化', () => { 5 | it('可以通过应用根节点元素访问 $rootScope，$id 应为 1', () => { 6 | let rootElement = angular.element(document.querySelector('body')) 7 | expect(rootElement.scope()).to.have.property('$id', 1) 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /test/core/core-module.test.js: -------------------------------------------------------------------------------- 1 | import 'test/helper' 2 | import CoreModule from 'source/core/core-module' 3 | 4 | describe('［模块］：CoreModule', () => { 5 | it('具有正确的模块名称', () => { 6 | expect(CoreModule.name).to.equal('core') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /test/helper.js: -------------------------------------------------------------------------------- 1 | import 'angular-mocks' 2 | --------------------------------------------------------------------------------