Embed Size (px)
Citation preview
ANGULARJS ADVANCEDSTARTUP
SHARED OF EXPERIENCESCreated by / Gianluca Arbezzano @GianArb
BIG PROJECT != LITTLE PROJECTMaintainability, reusable code & modulability, tools
SEED PROJECTThe life is made of choice
How can I write a good UI?How can I manage login/logout?Where is my data?A good foldering is a secret of successDeploy?
For me seed project is perfect for the tests but it don'tresponde at this questions
BOWERPackage manager
BOWER.IObower.json configuration file
"name": "myapp", "version": "0.0.1", "dependencies": "angular": "~1.3", "angularlocalstorage": "~0.1" , "devDependencies": "angularmocks": "*"
GRUNTTask runner
GRUNT-CONTRIB-CLEAN clean: [ '<%= build_dir %>', '<%= compile_dir %>' ]
GRUNT-CONTRIB-WATCH delta: options: livereload: true , gruntfile: files: 'Gruntfile.js', tasks: [ 'jshint:gruntfile' ], options: livereload: false , assets: files: [ 'src/assets/**/*' ], tasks: [ 'copy:build_app_assets' ]
GRUNT-CONTRIB-CONCAT concat: build_css: src: [ '<%= vendor_files.css %>', '<%= less.build.dest %>' ], dest: '<%= less.build.dest %>'
GRUNT-CONTRIB-JSHINT jshint: src: [ '<%= app_files.js %>' ], test: [ '<%= app_files.jsunit %>' ], gruntfile: [ 'Gruntfile.js' ], options: curly: true, immed: true, newcap: true, noarg: true, sub: true, boss: true, eqnull: true , globals: ,
GRUNT-AWS s3: options: accessKeyId: "<%= conf.aws.accessKeyId %>", secretAccessKey: "<%= conf.aws.secretAccessKey %>", cache: false, access: "publicread", bucket: "<%= conf.aws.bucket %>" , build: cwd: "build/", src: "**"
Deploy?
GRUNT-CONTRIB-LESS less: build: src: [ '<%= app_files.less %>' ], dest: '<%= build_dir %>/assets/<%= pkg.name %><%= pkg.version %>.css', options: compile: true, compress: false, noUnderscores: false, noIDs: false, zeroUnits: false
How can I write a good UI?
GRUNT-CONTRIB-HTML2JS html2js: app: options: base: 'src/app' , src: [ '<%= app_files.atpl %>' ], dest: '<%= build_dir %>/templatesapp.js'
APPLICATION TREE build.config.js bower.json configuration.json.dist Gruntfile.js package.json README.md src app app.js app.spec.js home home.js home.less home.spec.js home.tpl.html assets fonts index.html less main.less variables.less
A good foldering is a secret of success
SINGLE MODULE build.config.js bower.json package.json README.md src home home.js home.less home.spec.js home.tpl.html
Every module is indipendent and splittable
BUILD.CONFIG.JS build_dir: 'build', compile_dir: 'bin', vendor_files: js: [ 'bower_components/angular/angular.js', 'bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'bower_components/angularuirouter/release/angularuirouter.js', 'bower_components/angularuiutils/modules/route/route.js', 'bower_components/angularcookies/angularcookies.js' ], css: [ ], assets: [ ]
INDEX.HTML<html> <head> <% styles.forEach( function ( file ) %> <link rel="stylesheet" type="text/css" href="<%= file %>" /> <% ); %>
<% scripts.forEach( function ( file ) %> <script type="text/javascript" src="<%= file %>"></script> <% ); %> </head> <body>
</body></html>
ROUTINGui-routing
angular.module( 'ngstartup.home', ['ui.router.state']).config(function config( $stateProvider ) $stateProvider.state( 'home', url: '/home', views: "main": controller: 'HomeCtrl', templateUrl: 'home/home.tpl.html' , data: pageTitle: 'Home' );
).controller( 'HomeCtrl', function HomeController( $scope, $stateParams )
);
NGUTILS... Open Source Experience ...
: Remote source, API, cognito, firebase(TODO)..cr-remote
: Login and authenticationcr-auth
: Role and authorizationcr-acl
: Session manager, wrap of cr-session agular-localstorage
: Aws integration, Cognito is ready, SQS and Dynamoare WIP!
cr-aws
Follow this project and help us with feedback and PRs
THE END- -
ng-startupAngularJs Utils [ngUtils]
![AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end](https://img.pdfslide.us/doc/110x75/5ee35669ad6a402d666d455f/angularjs-projects-forms-and-angularjs-and-typescript-spa-development-sources.jpg)
