I am new to angular and attempting to get my routing to work. It is coming up with nothing.
I'm using dreamweaver, it prompts me with the error "angular is not defined" but the js file is placed after the angular ones in the header?
When I click the links it does not direct me to anything and nothing is viewed. I suspect that either the code is broken or I am not setting up the ng-view correctly.
Would anyone be able to advise on how to get it working?
<header class="hidden-sm" >
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?
family=Droid+Serif|Roboto:300"
rel="stylesheet">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</header>
<nav class="container" id="main-nav">
<ul id="navlist">
<li class="navli">Build a PC</li>-
<li class="navli">About Us</li>-
<li class="navli"><a href="#/"><img src="images/hive32color.png"
alt="bee-logo"></a></li>-
<li class="navli">Contact Us</li>-
<li class="navli">Inside our Machines</li>
</ul>
</nav>
<section class="container">
<div class="col-lg-9" ng-view>
</div>
<aside class="col-lg-3">
</aside>
</section>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</body>
angular.module('myApp', ['ngRoute','RouteControllers']);
angular.module('myApp').config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',{
templateUrl:'templates/about.html',
controller:'AboutController'
})
.when('/build',{
templateUrl:'templates/build.html',
controller:'BuildController'
})
.when('/contact',{
templateUrl:'templates/contact.html',
controller:'ContactController'
})
.when('/inside',{
templateUrl:'templates/inside.html',
controller:'InsideController'
});
});
edit: I realised i was not running a web server, i have done that now and it still is not working!
there is no need to add "/" after "#" in href. Just try href="#Contact" for your reference https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
Related
I'm learning Angularjs and this is my first code, but i can't find the bug, ng-view doesn't show data. I don't know how to debug mi code.
Please somebody can help me to show data using ng-view?.
This is my code:
Index.html
<!DOCTYPE html>
<html ng-app="FinalApp">
<head>
<title>AngularJS</title>
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.css">
<link rel="stylesheet" type="text/css" href="css/lumx.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>-->
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
<!--<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-parse-ext.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/lumx.js"></script>
</head>
<body>
<nav>
<div class="bgc-black-1 tc-white" flex-container="row" flex-align="center center">
<div flex-item="4">
<h1 class="fs-display-3 display-block">Posts App</h1>
</div>
<div flex-item="1">
Inicio
</div>
<div flex-item="1">
Crear Post
</div>
</div>
</nav>
<div flex-container="row" flex-aling="center">
<div ng-view flex-item="9"></div>
</div>
</body>
</html>
and the controller is
angular.module('FinalApp')
.controller('MainController',function($scope,$resource){
Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
$scope.posts = Post.query();//agrupamos los posts
});
Home.html
<lx-tabs>
<lx-tab heading='Posts'>
<div class='p+'>
<div class='card' ng-repeat='post in posts'>
<div class='p+'>
<strong class='fs-headline display-block tc-red-900'>
{{post.title}}
</strong>
<div class='paragrah fs-body-1 mt+'>
{{post.body}}
</div>
<div class='card_actions'>
<a href='#'>Leer mas</a>
</div>
</div>
</div>
</div>
</lx-tab>
<lx-tab heading='Users'>
<div class='p+'>
hello world users
</div>
</lx-tab>
</lx-tabs>
App.js
angular.module('FinalApp',['lumx','ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/',{
controller: 'MainController',
templateUrl: 'templates/home.html'
})
});
Finally i'm using LumX for make the front end of the application and the version of LumX is v1.5.31
First the working demo, you can find it in the below link!
JSFiddle Demo
I checked your code, there are only some minor corrections.
Instead of defining angular.module('FinalApp') differently in different files, try following a syntax like this.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
app.controller('MainController',function($scope, $resource){
var Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
console.log(Post.query());
$scope.posts = Post.query();//agrupamos los posts
});
So you define it only once and assign it to a variable, which can be used anywhere in the project, like shown in the above code. Thus the dependencies are always available to all the controllers!
In order to use $resource of angular, you need to include the file angular-resource.min.js and also, after including the file you need to add it to the module dependencies.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
There is also one minor suggestion I would like to make. It's that the tabs don't have a label. you can define them like so.
<lx-tab heading='Users' lx-label="Users">
<div class='p+'>
hello world users
</div>
</lx-tab>
I am using templates in the script tag to create the different pages for the router, you can use the normal method itself, so you
need to ignore the changes I have made in config section, I mean the below part.
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
Please let me know if it still shows errors, Happy Coding!
I have no idea what I am doing wrong, the controller is not being called.
index.html:
<!DOCTYPE html>
<html ng-app="myApp" ng-contoller="mainCtrl">
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" href="css/custom.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--http://materializecss.com/-->
</head>
<body>
HERE: {{test}}
<nav>
<div class="nav-wrapper topNavBar">
<img class="responsive-img circle profile_logo" src="images/img2.jpg">
<ul id="nav-mobile" class="left">
<li class="topLeftNavBtn" data-activates="slide-out"><a><i class="material-icons">reorder</i></a></li>
<li><img src="images/omitted.png"> | Albums</li>
</ul>
</div>
</nav>
<div ng-view></div>
<!-- ///////////////////////////////// side collapsible nav /////////////////////////////////////////////// -->
<ul id="slide-out" class="side-nav">
<li>
<div class="left_nav_header">
<img src="images/omitted.png"> | Albums</li>
</div>
</li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon homeLink">home</i>Home</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon linked_cameraLink">linked_camera</i>Albums</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon person_addLink">person_add</i>Shared with me</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon roomLink">room</i>Centres</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon live_helpLink">live_help</i>Help</a></li>
</ul>
<!--<i class="material-icons">menu</i>-->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(".topLeftNavBtn").sideNav();
</script>
<!-- Bower components -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<!-- Angular modules -->
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/login/login.js"></script>
<script src="modules/albums/albums.js"></script>
</body>
</html>
And here's the app.js file:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'firebase',
'LocalStorageModule',
'myApp.home',
'myApp.login',
'myApp.albums'
])
// Configuring routing
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/home'});
}])
// Configuring localstorage
.config(['localStorageServiceProvider', function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('tribees')
.setStorageType('sessionStorage');
}])
// Main Ctrl
.controller('mainCtrl',['$scope','$location','localStorageServiceProvider',
function($scope,$location,localStorageServiceProvider){
$scope.test = "REACH"; // THIS IS NOT COMING UP
console.info("REAACH"); // THIS IS ALSO NOT COMING UP
if(!localStorageServiceProvider.isSupported) {
console.warn('LocalStorage is not supported');
} else {
console.info('good to go');
}
$scope.showNav = function() {
console.info("REACH");
// Only show header if the user is not at login screen
return !$location.path().endsWith('/login');
}
}]);
You'll notice that I have a console.info in there, and a $scope.test but they are not being set, so the function is not being called. What am i doing wrong?
You have typo actually.
Change
ng-contoller="mainCtrl"
to
ng-controller="mainCtrl"
I'm trying to run a simple CRM app, based on the MEAN stack web-book. Upon loading the page I get the following error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=userApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.7%2F%24injector%2Fmodulerr%3Fp0%3DuserCtrl%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.7%252F%2524injector%252Fnomod%253Fp0%253DuserCtrl%250AI%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A24%253A186%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A252%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A1%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A427%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A444%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Afb%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A41%253A35%250Azc%252Fd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A463%250Azc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A293%253A238%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A174%253A399%250AHf%252Fc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A35%253A212%250A%0AI%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A6%3A416%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A38%3A184%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A444%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Afb%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A41%3A35%0Azc%2Fd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A293%3A238%0Aa%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A174%3A399%0AHf%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A35%3A212%0A
angular.min.js (line 6, col 416)
This is my app.js file (the main app module)
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
and my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User CRM</title>
<base href="/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/cs/style.css">
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="app/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="app/controllers/userCtrl.js"></script>
<script type="text/javascript" src="app/services/authService.js"></script>
<script type="text/javascript" src="app/services/userService.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<header>
<div class="navbar navbar-inverse" ng-if="main.loggedIn">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-fire text-danger"></span> User CRM
</div>
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user"></span> Users</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!main-loggedIn">Login</li>
<li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.name }}!</li>
<li ng-if="main.loggedIn">Logout</li>
</ul>
</div>
</div>
</header>
<main class="container">
<div ng-view></div>
</main>
</body>
</html>
I have loaded the local dependencies using bower (angular, angular-route, angular-animate), and the rest of the are local .js files, so I can't really figure out what the problem is.
The whole project can be found at this Git Repo. The angular part of the code is located in the /public folder.
Any feedback/ideas appreciated.
You are trying to inject userCtrl in your app, I could not find it in the git repo you
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
Angular DI, is looking for a service / controller / factory any component that is names userCtrl, which it can not find.
Angular DI does not look for files, rather components with the string names of your components.
Your controller and your services have to be part of your userApp module, not separates MainCtrlor userService modules.
Change
// This declares a new module named 'mainCtrl'
angular.module('mainCtrl', [])
angular.module('userService', [])
angular.module('autService', [])
to
angular.module('userApp')
When I double click the index.html the browser only loads the nav-bar, the contents inside partial-home.html is not showing.
app.js
This is the app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
index.html
This is the index.html
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script> https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js</script>
<script>https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js</script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
partial-home.html
This is the partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</div>
When you are saying "I double click index.html" you mean that you are opening the file with your browser?
If yes it could be the problem. You need to load it on a web server.
You can do that with live-server
First install node.js if you don't have it.
Then install live-server with this command : npm install -g live-server
Then go to your working directory and launch the server with this command : live-server
Your browser should launch your app. The URL shouls be like this: http://localhost/... which means you are on your web server!
There is a working example
I just changed your <script> settings:
<script data-require="angular.js#*"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"
></script>
<script data-require="ui-router#*"
src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
></script>
<script src="app.js"></script>
The rest is the same as above. Check it here
How can we avoid including all .js and .css files in the index.html like in this example :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<base href="/">
<meta charset="utf-8">
<title>ShowTrackr</title>
<link href="favicon.png" rel="icon" type="image/png">
<link href='http://fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="//cdn.jsdelivr.net/ionicons/1.4.1/css/ionicons.min.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span>Show<strong>Trackr</strong></span>
</a>
</div>
<ul class="nav navbar-nav">
<li data-match-route="/$">Home</li>
<li data-match-route="/add">Add</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="!currentUser">
<li data-match-route="/login">Login</li>
<li data-match-route="/signup">Sign up</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="currentUser">
<li class="navbar-text" ng-bind="currentUser.email"></li>
<li>Logout</li>
</ul>
</div>
<div ng-view class="{{pageClass}}"></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-strap.js"></script>
<script src="vendor/angular-strap.tpl.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="vendor/moment.min.js"></script>
<script src="app.js"></script>
<script src="filters/fromNow.js"></script>
<script src="directives/uniqueEmail.js"></script>
<script src="directives/passwordStrength.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/add.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/signup.js"></script>
<script src="services/auth.js"></script>
<script src="services/show.js"></script>
<script src="services/subscription.js"></script>
<!--<script src="app.min.js"></script>-->
<!--<script src="templates.js"></script>-->
</body>
</html>
This code comes from this github : https://github.com/sahat/tvshow-tracker
The code is used for a tutorial : http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/
I'd like to do something like :
angular.module("MyApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "homeCtrl"
/*
Here say to include in the same time specific .js
(for example the one who contain the 'homeCtrl' controller) and .css
*/
});
}]);
Because with the html code above, there are going to be a lot of server requests and possibly useless (If the user don't use the whole application). I cannot imagine Google didn't think of it.
You can inline the CSS and JS code in the view. If the view is cacheable it is not a big issue.
You may want to take a look at http://webcomponents.org
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/