-
Notifications
You must be signed in to change notification settings - Fork 17
/
Angular JS Deployment Essentials=Kent C. Dodds;Note=Erxin.txt
136 lines (89 loc) · 3.99 KB
/
Angular JS Deployment Essentials=Kent C. Dodds;Note=Erxin.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
Angular JS Deployment Essentials=Kent C. Dodds;Note=Erxin
# who this book for
- angular js community has publihed a suifeit of free resource
http://egghead.io
http://thinkster.io
https://github.com/mcunningham/AngularJS-Learning
- tool stack
boilerplates/seed project
code editors
IDEs
code servers
liveReload
source/version control
respective web application
web browsers, browser stack
browser devTools
PaaS, is shorthand for platform as a service
# chapter 1 our app and tool stack
- tools
git
- npm
$npm search [term]
- yeoman's workflow, yeoman is a CLI that is the glue holds your tools into opinionate workflow.
aim at improving your developer's experience of building static websites single page applications and everything in between opinionated
- YO, aprt from having one of the hippest namespace. by default yo command asssumes that you mean to scaffold something at a project level.
$ yo angular:route radicalRoute
the :route sub-generator command is automates all of the following key tasks
+ creates a new file
radicalApp/scripts/controllers/radicalRoute.js
contains the controller logic for radicalRoute view
+ creates another new file, radicalApp/views/radicalRoute.html that contains the associated view markup and directives
+ lastly it adds an anditional route within, radicalApp/scripts/app.js that connects the view to the controller
+ yo angular contain other command
:controller
:directive
:filter
:service
:factory
:provider
:value
:constant
:decorator
:view
- install Yo
$ npm install -g yo
- grunt is a task runner that enhances your existing and/or Yeoman's workflow by automating repetitive tasks
after generate a new project with yo, it creates a /Gruntfile.js. it is used to performing the following tasks
+ defines the yo places bower packages
+ defines the path where the grunt build command places the production-ready code
+ initialize the watch task to run
+ JSHint when javascript are saved
+ Karma's test runner when js file are saved
+ compass the scss or sass files are saved
+ saved /gruntfile.js
+ initializes liveRoad when any html or css files are saved
+ configures the grunt server command to run a node.js server on localhost:9000 or show test results on localhost:9001
+ autoprefixes css rules on LiveReload and grunt build
+ it renames files for optimizing browser caching
+ cofgiures the grunt build command to minify images, svg, html, and css files or to safely minify angular files
$grunt server
$grunt test
$grunt build
- bower, package install
$ bower install [PackageName] --save
bower will automate the following steps
+ search package
+ download
+ move the package to the location defined in your project's /gruntfile.js which is naemd /bower_components
+ insert dependencies in the form of <link> element for css files in the document's <head> element and <script> element for javascript files above the </body> in your index.html file
$bower update
will update packages
register your own package to bower
$ bower register [the-package-name] [git-end-point]
- ionic framework, it is a bridging between web application and native mobile applications.
ionic and yeoman where it assembles tools that were already available to developers into a neat package
- batarang , it adds a third-party panel on right hand side of console to devTools that facilitates angular's specific inspection. It is a chrome extension
- krakn
+ setting up git and git hub
+ scaffolding the app with yo
$ npm install -g yo
+ scaffolding the app with yo
$ npm install -g gnerator-ionicjs
to install generator-ionicjs
scaffolding of your application run
$ yo ionic
+ developmemt
$ grunt serer
you could edit and change your source code, after save LiveReload will automatically reload your browser
+ views and controllers and routes