Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jason chan
jason chan
31,009 Points
Posted by jason chan
jason chan
31,009 Points

This is my simple spa with angularjs with routing service

Folder structures
index.html
app.js
pages/
--main.html
--second.html

//index.html
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular Dummy</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular-messages.js"></script>
    <script src="https://code.angularjs.org/1.5.0-rc.1/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.5.0-rc.1/angular-route.min.js"></script>
    <script src="app.js"></script>
    <style>
        html, body, input, select, textarea{ font-size: 1.05em !important}
    </style>
<body>
   <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#/second"><i class="fa fa-stop"></i> Second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">
        <!-- pages got plopped into here through ng-view -->
            <div ng-view>


            </div>

</body>
</html>

// app.js
var myApp = angular.module('myApp', ['ngMessages', 'ngResource', 'ngRoute']);

// routes
myApp.config(function($routeProvider){

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    })
    .when('/second/', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })
    .when('/second/:num', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })
});

// service
myApp.service('nameService', function(){

    var self  = this;
    this.name = 'John Doe';

    this.namelength = function(){

        return self.name.length;
    };

});

// controllers
myApp.controller('mainController', ['$scope', '$filter', '$http', '$location', '$log', 'nameService', function($scope, $filter, $http, $location, $log, nameService) {

    $scope.name = "jason";
    $log.log(nameService.name);
    $log.log(nameService.namelength());
}]);
myApp.controller('secondController', ['$scope', '$filter', '$routeParams',function($scope, $filter, $routeParams) {

    $scope.num = $routeParams.num || 1;
}]);

two views in pages (folder)

// pages/main.html
<h1>This is main {{name}}</h1>

// pages/second.html
<h1>This is second</h1>

{{num}}
jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

thanks angularjs is pretty hard to learn. You gotta have strong javascript theory to understand what's going under the hood.