I try to use angular ui-router in my web app but I have problem.
Here is the app directory:
test-app
|_ bower-component
|_ app
|_ views
|_ index.html
|_ scripts
|_ app.js
and in app.js:
angular
.module('testApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ui.router',
'ngSanitize',
'ngTouch'
])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'index.html',
controller: 'MainCtrl'
})
.
.
.
But when I run the app, I get this error on console:
WARNING: Tried to load angular more than once
Your webserver loads the index.html file, but then you load it again in the view with
templateUrl: 'index.html'
So I think you intended that to be a different template. What you have here causes the index HTML file to be loaded inside itself, including the angular script tags, causing that error.
Using reqire('./path/angular.min.js') will solve any problem related to loading it more then once.
Related
How can I load AngularJS templates from a Phoenix framework application? I am using the ui-router to load a template using templateUrl. This is with angular 1.5.
myAppModule.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('event', {
url: '/event',
templateUrl: '/templates/event/event.html'
// template: '<h1>Stuff</h1>'
})
$urlRouterProvider.otherwise('/event');
}]);
Loading an inline template works, so it is clearly the mechanism for loading templates which I am struggling with.
Are there any settings in the brunch config I need to change?
Thank you
Eamon
Well, it's not too simple. I fall into the same problem, so here is my solution. Phoenix Framework has a directory where you can put your HTML files, the name of the directory is web/static/assets, you can set your files there, but if you need to create a directory like web/static/assets/templates you need to add exception in the endpoint.ex, like:
plug Plug.Static,
at: "/", from: :app, gzip: false,
only: ~w(css fonts images templates js favicon.ico robots.txt)
Now you can recompile and run your Elixir code and load your file like:
myAppModule.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('event', {
url: '/event',
templateUrl: 'templates/event/event.html'
})
$urlRouterProvider.otherwise('/event');
}]);
I hope that works for you too.
I'm using AngularJS 1.3 on a large single page app and I'm trying to split up my routes file.
I'm following the advice from the following question and have run into problems finding my new module
How might I move AngularJS Routes into separate file
My routes-work-desc.js.coffee is
angular
.module('workDesc')
.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
$stateProvider
.state "work_descs",
parent: "default"
url: "/work_descs"
views:
"":
controller: "WorkDescsController"
templateUrl: "/assets/work_descs/index.html.erb"
]
My routes.js.coffee file is
angular
.module('paisApp', ['workDesc'])
.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
$urlRouterProvider
.otherwise("/")
$stateProvider
.state "default",
abstract: true # Parent route/template
views:
"":
controller: "ApplicationController"
templateUrl: "/assets/layouts/default.html.erb"
]
The error I get is
Error: [$injector:nomod] Module 'workDesc' 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.
http://errors.angularjs.org/1.3.20/$injector/nomod?p0=workDesc
Here is my code:
var app = angular.module('todoApp', ['ui.router', 'ngResource', 'ui.bootstrap']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: '/templates/index.html',
})
.state('signup', {
url: "/signup",
templateUrl: '',
})
}
]);
module.exports = app;
When i'm running in in browser, it show me an error:
ReferenceError: module is not defined
What i'm doing wrong ? How to properly define module ?
The console error message a few lines below the module is not defined gives a hint where the problem is:
Module 'ui.router' is not available! You either misspelled the module name or forgot to load it.
Check if you have included the file containing ui.router into your page (i.e. HTML template) so that Angular can load it.
Add the references to ui-router and bootstrap to make it work.
here is the working app
I've never used Angular UI Router before but I want to build an application that has nested views so it looks like the most sensible choice. However. I just can't get my head around it. My application is modular so I have an element on my page that I want the other modules, with their view templates, to load into.
Then when some action is taken inside one of the nested views, say a button click, I would like the state to change so that module to becomes the only one inside the main view, and for the URL to change:
I'm writing in CoffeeScript and using Browserify to tie the app together, so all the modules are in separate files and required in. This is where I've got so far but it's not working and I can't figure it out.
app.coffee
require...
require...
require...
app = angular.module("darrylsnow", [
"ngAnimate"
"ui.router"
"submodule1"
"submodule2"
"templates"
]).config [
"$stateProvider"
"$urlRouterProvider"
"$locationProvider"
($stateProvider, $urlRouterProvider, $locationProvider) ->
$urlRouterProvider
.otherwise "/"
$stateProvider
.state "main",
abstract: true # because the main module requires the submodules
url: "/"
$locationProvider.html5Mode true
]
submodule1.coffee
submodule1 = angular.module("submodule1", [
"ui.router"
]).config [
"$stateProvider"
"$urlRouterProvider"
"$routeProvider"
($stateProvider, $urlRouterProvider, $routeProvider) ->
$stateProvider
.state "main.submodule1",
url: ""
templateUrl: "submodule1.html"
.state "main.submodule1-expanded",
url: "/submodule1" # template shouldn't change
]
submodule2.coffee
submodule2 = angular.module("submodule2", [
"ui.router"
]).config [
"$stateProvider"
"$urlRouterProvider"
"$routeProvider"
($stateProvider, $urlRouterProvider, $routeProvider) ->
$stateProvider
.state "main.submodule2",
url: ""
templateUrl: "submodule2.html"
.state "main.submodule2-expanded",
url: "/submodule2" # template shouldn't change
]
Is it even possible to have child states in different modules? If not how would you recommend I do it? Thanks.
There is a working example, where I tried to show how to put angular, ui-router and coffee together. While I am not 100% sure what exactly you were trying to achieve ... you can find some answers and inspiration there.
Firstly the (simplified) index.html
<head>
...
<script src="app.js"></script>
<script src="submodule1.js"></script>
<script src="submodule2.js"></script>
</head>
<body>
<ul>
<a ui-sref="main.submodule1.expanded">main.submodule1.expanded</a>
<a ui-sref="main.submodule2({id:22})">main.submodule2</a>
<a ui-sref="main.submodule2-expanded({id:22})">main.submodule2-expanded</a>
<div ui-view=""></div>
</body>
Now, this would be the app.coffee, where the most important part is the template. That will allow each child to inject its view into this unnamed view template. The other option would be to use absolutely named views, but this keeps it simple:
app = angular.module("darrylsnow", [
"ui.router"
"submodule1"
"submodule2"
]).config [
"$stateProvider"
"$urlRouterProvider"
"$locationProvider"
($stateProvider, $urlRouterProvider, $locationProvider) ->
$stateProvider
.state "main",
template: "<div ui-view />"
abstract: true # because the main module requires the submodules
url: "/"
...
The other files represents really different modules.
The example of submodule1.coffeee shows that even here we are using nesting (the main.submodule1.expanded is child of main.submodule1):
submodule1 = angular.module("submodule1", [
"ui.router"
]).config [
"$stateProvider"
"$urlRouterProvider"
"$locationProvider"
($stateProvider, $urlRouterProvider, $locationProvider) ->
$stateProvider
.state "main.submodule1",
template: "<div ui-view />"
abstract: true
.state "main.submodule1.expanded",
url: "/submodule1" # template shouldn't change
templateUrl: "submodule1.html"
controller: 'Some1Ctrl'
]
submodule1.controller 'Some1Ctrl', [
"$scope"
"$stateParams"
"$state"
($scope, $stateParams, $state) ->
$scope.params = $stateParams;
$scope.state = $state.current;
]
As a different approach we can use siblings as the submodule2.coffee shows:
submodule2 = angular.module("submodule2", [
"ui.router"
]).config [
"$stateProvider"
"$urlRouterProvider"
"$locationProvider"
($stateProvider, $urlRouterProvider, $locationProvider) ->
$stateProvider
.state "main.submodule2",
templateUrl: "submodule2.html"
controller: 'Some2Ctrl'
.state "main.submodule2-expanded",
url: "/submodule2/{id}" # template shouldn't change
templateUrl: "submodule2.html"
controller: 'Some2Ctrl'
...
Well how that all fits together is the best to observe in this plunker
I'm having troubles using the ui-router plugin of AngularJS:
angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
I then get this error at startup:
Unknown provider: $stateProvider
I've included the javascripts in this order:
<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>
What could be the issue ?
[EDIT]
I've got rid of the error message by adding 'ui.compat' as a dependency of myApp. I saw that in the sample code of ui-router but nowhere in the documentation. What is this about ?
Nevertheless, it still does not work. I've added ui-view to a div in the application index file. But the page remains blank.
The following piece of code should do the job. At least in my case, so let me know if it works or not.
angular.module('myApp', ['ui.compat']).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
Now about your issue with the page being empty. For sure the URL you have in the browser is not matched with any defined in your state. Try this '#/domiciliations/mandats' in your browser and see if the view gets rendered appropriately. Not that you absolute url should be something similar with http://[HOST_NAME]/home.html#/domiciliations/mandats.
You just need to include ui-router module as dependency.
like following
angular
.module('myApp', ["ui.router"])
.config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
...
}]);
Including the angular-ui v0.0.2 will fix the problem.