What do we want
for the future of
Coastal.ca.gov?

Here's My Wishlist

1. Modular Organization
2. Ease of Maintenance
3. Data Driven Dynamic Content
4. Extensibility
5. High Performance

How can we
have our cake
& eat it too?

AngularJS

By Google

Vanilla HTML is great ...

@ making static linked documents

but it fails on dynamic content

AngularJS extends HTML

to facilitate dynamic content

But how?!?

1. It allows for declarative syntax via HTML attributes
2. Everything is a module...the app is a module, each page is a module...modules depend on other modules
3. Every request is an AJAX call == speed & bandwidth savings
4. Its easy to get data from a database onto the page...then filter it, search it, interact with it, etc.

Ng-Coastal

#1 Modular Organization

How are things organized?

MVC

M => Model => Data

V => View => Pages

C => Controller => Logic

separation of concerns

A standard way to organize a complex codebase

That's nice,
but how does MVC help
organize our real code?

File/Folder Structure

ng-coastal/
--- index.html
--- coastal.js
--- coastal.css
--- pages/
------ home/
--------- home.html
--------- home.js
--- images/
------ all images
--- components/
------ angularjs/
------ all 3rd-party additions
						

Does a visitor navigate to
coastal.ca.gov/pages/home/home.html?

NO!

that's where Routes come in

What are ROUTES?

1. A visitor navigates to a page, by using a link to a route/URL
2. Angular observes the route/URL change
3. Determines the appropriate view/controller/model for that route/URL
4. Replaces the old view with the new view
5. Rinse, lather, repeat

So our file/folder structure is not tied to our URLs...

structured flexibility

How is this
achieved
in our code?

index.html

‹html ng-app="coastal"›
    ‹head›
        
        
    ‹/head›

    ‹body›
        

        


        
    ‹/body›
‹/html›
						

Textbook stuff

coastal.js

angular.module('coastal', [
	// global dependencies
	'ngRoute',

	// pages
	'coastal.home',
	...
])

// redirect to /home if attempted route does not exist
.config(['$routeProvider', function($routeProvider) {
	$routeProvider.otherwise({redirectTo: '/home'});
}]);
						

Global/application module that ties most everything together

We only need touch this file if we add a new page or module

home.js

angular.module('coastal.home', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'pages/home/home.html',
        controller: 'HomeCtrl'
    });
}])

.controller('HomeCtrl', [function() {
    ...
}]);
						

We only need touch this file if we add logic to the home page/view

home.html

    
        
            ...
        
    

						

Nothing new here

We only need touch this file if add or update content to the home page/view

Ng-Coastal

#2 Ease of Maintenance

Want to edit an existing page's content?

it's the same process as today, except easier to locate because our file/folder structure mirrors our navigation

Want to add a new page?

1. create a new folder under /pages where the page will live in the global nav
2. create 2 new files...new-page.html & new-page.js
3. link to the new-page.js file within /index.html
4. copy & paste the boilerplate JS into new-page.js
5. add the coastal.new-page module as a dependency in coastal.js
6. add the new-page to the global nav in index.html
7. add your new-page HTML within /new-page.html

Only steps 2, 4 & 5 are additions to our current process

Ng-Coastal

#3 Data Driven Dynamic Content

Data Output

1. We create a new module, I'll call it Data
2. Data is injected as a dependency of a home.js's controller like this

   
   .controller('HomeCtrl', ['$scope', 'Data', function($scope, Data) { ... }]);
   								

3. Then we make the Data available to home.html in our home.js controller like this

   
   $scope.data = Data;
   								

4. & in home.html we can inject the data like this

   
   {{ data }}
   								

5. Moreover, we can repeat many items like this

   
       
   
           
   {{ item }}
       
   								

Data Input

Hello {{yourName}}

This approach is called
2-way data binding
& it's in Angular's core

Name:




Hello {{ yourName }}
						

Ng-Coastal

#4 Extensibility

Everything is a module

We've already extended Angular with modules for each page & for accessing our Data

Beyond that, Angular has a HUGE developer community that regularly Open Sources 3rd party modules

Ng-Coastal

#5 High Performance

AngularJS
applications
are fast

...faster than Usan Bolt

DEMO

What we can measure
We can optimize

AKA How things are today

1. A visitor navigates to our homepage
2. 100% of the resources are retrieved from the server
3. The visitor navigates to another page
4. 100% of the resources are retrieved from the server, even if we just had some of them
5. Rinse, lather, repeat

How Angular handles resources

1. A visitor navigates to our homepage
2. 100% of the resources are retrieved from the server
3. The visitor navigates to another page
4. Rinse, lather, repeat

Only new resources
are retrieved
from the server

Aside from speed...

Saving resources
is a big deal
in the context of
mobile data plans/caps