This is my first project with Angular. I'm still in the process of figuring out how to do things with Angular, so I'd like to apologize if my questions sound stupid.
My Questions
Why are my views not showing up when i navigate to index?
How can I fix this?
Overview
So, my index file shows the views I have used in the ui.router library. form.html contains my template header and footer. Within that file, I then have another...
<div id="form-views" ui-view></div>
... that should inject all my nested views.
However, when I go to index, I'm just getting a blank page and no errors!
Source code
app.js
angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router']);
config.js
angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/signup)
.state('form.signup', {
url: '/signup',
templateUrl: 'views/form-signup.html'
})
// url will be /form/select
.state('form.select', {
url: '/select',
templateUrl: 'views/form-select.html'
})
// url will be /form/type
.state('form.type', {
url: '/type',
templateUrl: 'views/form-type.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/signup');
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/override.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controller.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="MyFirstAngularApp">
<div class="container">
<!-- views will be injected here -->
<div ui-view></div>
</div>
</body>
</html>
form.html
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h1>Mock up Maker</h1>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".signup"><span>1</span> Sign Up</a>
<a ui-sref-active="active" ui-sref=".select"><span>2</span> Select</a>
<a ui-sref-active="active" ui-sref=".type"><span>3</span> Type</a>
<a ui-sref-active="active" ui-sref=".end"><span>4</span> End</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form name="myForm" id="signup-form" class="col-sm-8 col-sm-offset-2" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre class="col-sm-12 ng-binding">
{{ formData }}
</pre>
</div>
File structure
I don't see why its not working. Any help is very much appreciated!
The snippet
angular.module("moduleName", [])
defines a new module with the required dependencies in the array. If you want to further define components of this module, you need to define them using
angular.module("moduleName")
.controller(...)
.directive(...)
.config(...)
.run(...);
The latter is a getter syntax of angular module and doesn't define the module again.
Your current code defines the module MyFirstAngularApp two times. That should be the root of your problem.
You probably want:
angular.module('MyFirstAngularApp').config( ...
in your config.js
This avoids duplicating the module, instead it gets the instance already created in app.js and adds configuration on it. The same approach should be used in your controllers and other code.
I think you have a typo in your Views template folder. In the file structure directory you are having Views Folder whereas you are using lowercase views name in routing.
Related
I am building a single page web application using Angular and UI-Router. In my index.html page, I currently have these three elements, a navbar directive, a ui-view and a footer directive as shown below:
<body>
<div class="container-fluid">
<div class="row">
<cep-navbar></cep-navbar>
</div>
<ui-view></ui-view>
<div class="row">
<cep-footer></cep-footer>
</div>
</div>
<!-- All the bower script dependencies-->
<!-- build:js js/lib.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- All the custom script dependencies-->
<!-- build:js js/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- inject:template:js -->
<!-- endinject -->
<!-- endbuild -->
</body>
Module which contains the navbar directive defines the route as follows:
(function() {
'use strict';
angular.module('CEPAdmin.base.components')
.config(['$stateProvider', routeConfig]);
function routeConfig($stateProvider) {
$stateProvider.state('search', {
url: '/search',
templateUrl: 'src/app/pages/search/search.html',
controller: 'SearchController'
});
}
})();
I load in the search state by clicking on one of the links in navbar directive which injects of the search.html page in ui-view on the index.html page. But the problem is the script inside the script tag never executes. Here is my search.html page.
<script type="text/javascript">
console.log('Test me');
window.alert('Test me bro');
</script>
<h1>Hello World!!</h1>
Why is it that the script inside of scripts tag in search.html page not getting executed whenever my search state is loaded?
Link to plunk : https://plnkr.co/edit/RaX5Jsd5zqAfbwGE0i8o
Upon investigating it further, I got to know that stripped down version of jquery that angular uses (jQLite) has some DOM limitations which prevents it from executing a script file in partial view.
Solution
Reference a jQuery script before referencing Angular in your index.html. This makes angular to use jQuery instead of jQlite. Just doing this solved my problem.
So, I am really new to angular JS and I'm working on a project for a company with a team from my school as an internship. I have to get the routing working first though, and it just will not work no matter what I have tried. I tried it with angular JS 1.0.7 and with that I could get it to work, but with the newest version (1.5.7) I just can't after many many hours of trying. This is the error the console currently gives me:
Error: $injector:nomod
Module Unavailable Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. The error originates from the line in index.html as far as I know, since the error disappears if i remove it, but the routing doesn't work then either.
I'd really appreciate any help with this. I know I probably missed something incredibly basic (and the code is probably pretty sloppy), but I just can't figure it out. Oh and by the way, I tried putting the content from app.js to index .html inside script tags and then it didn't give the error, but didn't display anything either, really weird. I have also tried many different ways to do routing as instructed by different tutorials or guides, but I still can't get it to work.
Code:
Index.html (modified so as to not give way the name of the company etc.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ui-bootstrap-1.3.3-csp.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-1.3.3.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-touch.min.js"></script>
<script src="app/app.js"></script>
<script src="app/ctrl.js"></script>
<script src="scripts/routing.js"></script>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div class="navbar-header">
<a href="" class="navbar-brand">
<small>
<i class="glyphicon glyphicon-log-out"></i>
Products and Company Info
</small>
</a><!-- /.brand -->
</div><!-- /.navbar-header -->
<div class="navbar-header pull-right" role="navigation">
<i class="glyphicon glyphicon-book"></i> Howto
<i class="glyphicon glyphicon-home"></i> Home
</div>
</div><!-- /.navbar-container -->
</div><!-- /.navbar -->
<div>
<div class="container">
<div ng-app="app">
<h2>App name</h2>
<br/>
<div ng-view></div>
</div>
</div><!-- /.container -->
</div>
</body>
</html>
Code app.js:
var app = angular.module('mainApp', ['ngResource', 'ngRoute']);
app.run(function($rootScope) {
});
Code ctrl.js
app.controller("mainCtrl", function($scope) {
$scope.firstName = "first name";
$scope.lastName = "last name";
});
app.controller('howtoCtrl', function($scope) {
$scope.message = 'How To guide here';
});
Code routing.js:
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainCtrl'
})
// route for the how to page
.when('/howto', {
templateUrl : 'howto.html',
controller : 'howtoCtrl'
})
// route for the test2 page
.when('/testi2', {
templateUrl : 'test2.html',
controller : 'test2Controller'
});
});
Edit: After changing ng-app="app" to ng-app="mainApp", I got the following errors
angular.min.js:103 GET http://localhost/var/www/html/byow_routing_sahlays_2/byow/home.html 404 (Not Found)(anonymous function) # angular.min.js:103n # angular.min.js:98g # angular.min.js:95(anonymous function) # angular.min.js:130$eval # angular.min.js:145$digest # angular.min.js:142$apply # angular.min.js:145(anonymous function) # angular.min.js:20invoke # angular.min.js:41c # angular.min.js:20Bc # angular.min.js:21ge # angular.min.js:19(anonymous function) # angular.min.js:315b # angular.min.js:189Sf # angular.min.js:37d # angular.min.js:36
angular.min.js:117 Error: [$compile:tpload] http://errors.angularjs.org/1.5.7/$compile/tpload?p0=home.html&p1=404&p2=Not%20Found
at Error (native)
at http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:6:412
at http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:156:281
at http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:130:409
at m.$eval (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:107)
at m.$digest (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:142:173)
at m.$apply (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:401)
at l (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:97:250)
at K (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:101:373)
at XMLHttpRequest.y.onload (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:102:397)
Final Edit:
Thanks guys, it works now. The problem was first that ng-app="app" should have been ng-app"mainApp", and I forgot to include the folder to the address of the tempaltes in routing.js after I had originally moved the files to their own folder.
You call in your html <div ng-app="app"> but your app is named mainApp.
Try to change <div ng-app="app"> to <div ng-app="mainApp">
Add below code to the very first line of ctrl.js and routing.js
var app = angular.module('mainApp');
cheers!
I have an application with 10 views and several shared components
--app
-------components
-------------home
-----------------homeController.js
-----------------homeDirective.js
-----------------home.html
.
.
.
-------shared
----------modals
------------someModal
--------------- someModalController.js
--------------- someModal.html
the components load by angular routing
(function() {
'use strict';
angular
.module('app')
.config(appConfig);
function appConfig($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "app/components/home/home.html", controller: 'homeController' })............
otherwise({ redirectTo: "/home" });
}
})();
the modals used in different components , all things are worked when the main page contains all script files. for example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body ng-app="fleetCam" ng-controller="appController">
<div id="wrapper">
<div id="page-wrapper">
<ng-view>
</ng-view>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ngStorage.js"></script>
<script src="appMain/app.module.js"></script>
<script src="appMain/app.routes.js"></script>
<script src="appMain/app.services.js"></script>
<script src="appMain/app.directive.js"></script>
<script src="appMain/components/home/homeController.js"></script>
<script src="appMain/components/home/aboutController.js"></script>
<script src="appMain/shared/modal/insert/insertController.js"></script>
I looking for a way to remove the last three script tags and load controller or other dependencies on the fly. I have searched a lot about lazy loading but no one works in my context especially when I add shared components.
You could use the patterns from the async section on the official angular-seed repo: https://github.com/angular/angular-seed/#loading-angular-asynchronously
https://github.com/angular/angular-seed/blob/master/app/index-async.html
this relies on the ded/script "Async JavaScript loader & dependency manager" https://github.com/ded/script.js
I was wondering what the best way to structure templates in an AngularJS SPA. So far I have kind of a rails approach, but I'm not sure if this is a good idea.
What I mean is that I for example have a /js/app/views/partials folder where I have snippets of html that are used in different places. This could be a form or a preview of content, basically everything that is used all over the app. I like this structure because let's say you have a comment form that appears in 5 different places and you want to add a field: Changing one file rather than 5 is much better.
I then for example have a /js/app/views/home.html template, that is referenced by my ui-router and loaded in ui-view in /index.html which only serves as layout.
/js/app/routes.js
myModule.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/js/app/views/home.html',
controller: 'MainCtrl',
resolve: {
// resolve code
}
});
}
]);
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<title><%= title %></title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='/css/style.css' />
<script src="/js/angularjs-1.3.16.min.js"></script>
<script src="/js/angular-ui-router-0.2.15.js"></script>
<script src="/js/app/app.js"></script>
<script src="/js/app/routes/routes.js"></script>
<script src="/js/app/services/services.js"></script>
<script src="/js/app/controllers/controllers.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
/js/app/views/home.html
<div class="page-header">
<h1>v2</h1>
</div>
<div ng-include src="'/js/app/views/partials/post-form.html'"></div>
<div ng-repeat="post in posts">
<div ng-include src="'/js/app/views/partials/post-preview.html'"></div>
</div>
So the ui-router is called with the home state and injects the /js/app/views/home.html in /index.html (at ui-view). home.html itself includes two partials /js/app/views/partials/post-form.html and /js/app/views/partials/post-preview.html.
The result are a lot of XHR requests for a single page load. That cannot be good for performance.
Is there a better way to do that? Or can I just not structure my views with so many partials and have to use fewer files and repetitive code?
My backend / server is NodeJS with Express. So maybe it would also be an option to do that server-side, using express partials.
I am trying to learn angular.js and incorporate some routes within my app. The problem that i am running into is that i have hit a snag with creating routes. I have two similar pages, and keep hitting 404's when i fire up the app in my local host. I feel like i am close because everything is being read, and i have no errors within the console, but i still have yet to get the entire routes to properly operate. I would be very grateful if anybody could take a quick look at my code below and see if there is anything that i need to alter to fix.
I believe that because of my circumstances i have one of two situations. I either have an issue with my code, or I have an issue with my server side routing. If it is my code, i was hoping someone could see if there is any issues with it and help me out with it. If it is a problem with my server side routing, them I honestly have no idea what to do.
Below is my app.js file. I feel like if there is anything that I have made a mistake with, it would be this one, but i'm not entirely sure.
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/index/', {
controller: 'MainController',
templateUrl: 'views/home.html'
})
.when('/test/', {
controller: 'testController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
These are the two html pages that i have within my views. They very similar i just have different controllers associated with them. The first one is called test, and the second one is called index
<div class="main" ng-controller="testController">
<div class="container">
<h1>{{ title }}</h1>
<div ng-repeat="product in products" class="col-md-6">
<product-info product="product"></product-info>
</div>
</div>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<div ng-repeat="product in products" class="col-md-6">
<product-info product="product"></product-info>
</div>
</div>
</div>
</div>
Finally, here is my general views index page:
<!doctype html>
<html>
<head>
<link href="css/main.css" rel="stylesheet" />
<script src="js/shared/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>"
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Stadiums in various leagues</h1>
</div>
</div>
<div ng-view></div>
<div class="footer">
<div class="container">
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/productInfo.js"></script>
</body>
</html>