Angular Miami – – First things first

View Github Repository Open presentation in a new window

mikem3d

See all presentation from mikem3d

Angular Miami – – First things first

0 3

angularmiami

Angular Miami workshop

On Github mikem3d / angularmiami

Angular Miami

First things first

Get it here

https://angularjs.org/

Include it like this

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>

Plnkr

plnkr session

Fork me!

https://github.com/mikem3d/angularmiami

Visit me

angularmiami.coangularmiami.co/app

Reach out

michael@pop.co@mikem3d

What it is

Talk about traditional MVC concepts and frameworks. Ask if any are familiar with the term. Talk about how angular simplifies the relationship within the Models/Views/Controllers

AngularJS is a structural framework for dynamic web apps.

  • Uses HTML for templates
  • Robust data binding
  • Industry backed
  • Easier to test, maintain, write less and cleaner code

Is it popular?

View / Template

Talk about other templating solutions. Talk about how angular compiles the template and then renders the view.

This is a "template". The transformed and rendered DOM is then called the "view".

Two-way data binding

Data-binding in Angular apps is the automatic synchronization of data between the model and view components.

First the template is compiled on the browser. The compilation step produces a live view.Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.

Model / Controller

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function.

Scope is the glue between application controller and the view. It is an execution context for expressions. Scopes can watch expressions and propagate events.

Scopes provide APIs ($watch) to observe model mutations. and ($apply) to propagate any model changes through the system into the view from outside of the "Angular realm" (controllers, services, Angular event handlers).

when do you need to call $apply()? Very rarely, actually. AngularJS actually calls almost all of your code within an $apply call. Events like ng-click, controller initialization, $http callbacks are all wrapped in $scope.$apply(). So you don’t need to call it yourself, in fact you can’t. Calling $apply inside $apply will throw an error.

Each Angular application has exactly one root scope, but may have several child scopes.

In general, a Controller shouldn't try to do too much. It should contain only the business logic needed for a single view. The most common way to keep Controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in Controllers via dependency injection.

The Model is the data shown to the user in the view and with which the user interacts. The model uses the controller scope as its context.

Best practices

  • Decouple DOM manipulation from app logic.
  • Decouple the client side of an app from the server side.
  • Keep Controllers light
  • Separate views,controllers,directives into separate files

NOW FOR THE FUN STUFF

THE END

BY Michael Martinez / michael@pop.co