Josh walked us through building a simple Angular app, using the lessons learned from Wintellect’s recent dev and launch of a global enterprise software app.
Angular is for AWESOME!
Josh Carroll
@jwcarroll
technofattie.com
The code
github.com/jwcarroll.ng-contacts
directives – typically an attribute on an element
————————————————-
ng-app
ng-init (used to inject a title in his demo)
– ng-init=”contacts=[bob1,bob2,bob3]”
– plugged it in with {{title}}
ng-model
– he bound an input to the ‘title’ var he had leveraged in the injected title
– ng-model=’title’
ng-repeat
-ng-repeat=”contact in contacts”>{{contact}}
ng-search
– “searching by ‘{{search}}'”
ng-if
– truthy comparison results in rendering the stuff
– empty string resolves to 0 so nothing would render
ng-controller – find the controller, and hand off DOM control to the controller by adding ng-controller to an element (ie a containing element)
– ng-controller contactListCtrl as ctrl (do a one time all inclusive effort to make $scope aware of all your controller’s functionality)
ng-view (a new html tag by virtue of angular)
– ala
ng-animate – a way to harness css3 animations
General
pipes (|) are filters. (think gulp)
– takes in something and returns something
– example was var AgeFilter (which returned a function as the filter)
$http as a param passed to function
– this.$http.prop etc.
– _this.$http.get(){
.success(callback) //this is a promise
}
– same for delete, etc
Modules
– used an IFFE function
– a module is a container holding the stuff related to the application
Controllers – just a JS object
$inject = a way to tell NG you need a component (used with $scope)
– $scope being where the data binding happens
Lodash (_. prefix)
Services
– must register a service
– can inject a service into a controller
Routing
– ngRoute (out of the box routing within angular)
– colon (:) is a routing parameter
– as in /contact/:contactId?
– routing as SPA method.. each route can be passed a different controllers (essentially a path-specific template) etc.
Handling when a route fails (ie error handling)
– he made a new js file: routeError.js (again, directive is a new html tag)
– which contained a new directive