I'm developing on http://localhost:3000/af2015/web/ (the extra directories will not be present on the production site) and using wordpress. My Angular app is on the /recommendations page, which includes this template:
<div ng-app="af2015App">
<div ng-controller="MapCtrl as vm">
<map center="[52.374, 4.899]" zoom="12">
</map>
</div>
<section>
<div ui-view>
</div>
</section>
</div>
The ui-view template is not being loaded, nor the controller being initialised. This is my config function, and I have tried all sorts of permutations of <base href="/af2015/web" /> tag. There are no errors in my console.
angular.module('af2015App')
.config(function($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider.state('list', {
//url: '/:alpha/:beta/:gamma',
url: '/recommendations',
template: '<h2>List</h2>',
controller: "ListController",
controllerAs: 'list'
});
});
Didn't try enough permutations. This one worked:
<base href="/af2015/web/recommendations/" />
And then
$stateProvider.state('list', {
url: '/',
Related
When I run my application it directs to localhost:8080/#/ and the header and footer which I setup in the app.html is called:
<div id="wrap">
<main id="main" class="container-fluid clear-top">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
//content here
</div>
</div>
</nav>
<div ui-view id='content-container'></div>
</main>
</div>
<footer class="footer">
//content here
</footer>
I have created two HTML pages and I want one of the html page to be shown when the app first loads.
Code in A.html:
<input type="text" class="form-control" data-ng-model="searchAll">
<a class="clear" data-ng-click="clearSearch()">X</a>
Code in B.html:
<input type="text" class="form-control" data-ng-model="search">
I have the following code in my router.js:
export default ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
$stateProvider
.state('app', {
url: '/',
template: require('./app.html'),
controller: 'AppCtrl',
controllerAs: 'app'
})
.state('app.A', {
url: 'A',
template: require('./A/index.html'),
controller: 'ACtrl',
controllerAs: 'a'
})
.state('app.B', {
url: B
template: require('./B/index.html'),
controller: 'B',
controllerAs: 'B'
});
$urlRouterProvider.otherwise('/');
}];
The header and footer should be in all the pages and the page A.html should be loaded when the app starts. Could anyone let me know how I could achieve this.
I think that you should set your 'app' state as abstracted.
using :
//...
abstract:true
//...
and removing the url property.
This way, the next app child state with root url "/" will be the first displayed on the screen :
.state('app.a', {
url: '/',
template: require('./A/index.html'),
controller: 'ACtrl',
controllerAs: 'a'
})
I think better you call A.html URL in otherwise and keep the header and footer in the index.html instead of creating a separate state for this.
export default ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
$stateProvider
.state('app.A', {
url: '/A',
template: require('./A/index.html'),
controller: 'ACtrl',
controllerAs: 'a'
})
.state('app.B', {
url: '/B',
template: require('./B/index.html'),
controller: 'B',
controllerAs: 'B'
});
$urlRouterProvider.otherwise('/A');
}];
First off I am new to angular and I am inheriting this project. This seems like it should be deathly easy to say if the state is this show this, but I keep failing :]
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('page1', {
url: '/page1',
data: etc..................
},
.state('page1.nest', {
url: '/page1/nest',
data: etc..................
},
.state('page2', {
url: '/page2',
data: etc..................
},
Each page has it's own controller. page1 and page1 nest share the same templateUrl: 'scripts/app/page.html'. The div below lives on the page.html.
How do I simple say...
<div>
<span ng-show="if state == page1">Page 1</span>
<span ng-show="if state == page1/nest">Page 1 Nest</span>
</div>
<div>
Same Content on both here
</div>
I think it has something to do with $stateParams needing to be exposed to the scope in the controller?
You'll want to use the $state service provided by UI-Router
Check the documentation out here.
You'll do something like
In your controller. Inject $state then set it to a scope variable
$scope.state = $state
Then you can do something like this.
<span ng-show="state.is('page1')">Page 1</span>
Alternatively obviously you can use a function in your controller.
<span ng-if="inState('page1')">Page 1</span>
In controller
$scope.inState = function(state){
return $state.is(state);
}
Let's start first by formatting your code a little better and closing parens where they should be closed.
angular.module('myApp')
.config(function($stateProvider) {
$stateProvider
.state('page1', {
url: '/page1',
template: 'templates/page1.html',
data: etc..................
}),
.state('page1.nest', {
url: '/page1/nest',
template: 'templates/page1.nest.html',
data: etc..................
}),
.state('page2', {
url: '/page2',
template: 'templates/page2.html',
data: etc..................
});
Typically you would have these various templates somewhere in your project structure like
/app
/templates
Then you have your index page...
<html ng-app>
<body>
<div ng-controller="myController">
<div ui-view></div> <!-- this is where the page1 or page2 state gets loaded -->
</div>
</body>
</html>
Then in your page1 or page2 html files
<div>
... content goes here ...
<div ui-view></div> <!-- nested content will go in here -->
</div>
Then in your page1.nest.html
<div>
... all your nested content goes here
</div>
I'm new to angular and following this tutorial:
https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router
but i'm injecting this module into another existing module.
However, I keep getting a "could not resolve states" error - I'm not sure why but suspect its either a routes issue and I'm being dumb, or otherwise its a nested views issue (note nesting of ui-view in index.html, and again in home.html).
using angular ui version 0.2.13
angular version 1.3.14
Please help!!
Below is the relevant code:
structure:
home.html
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- 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=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" 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>
{{ formData }}
</pre>
index.html
<body> blah blah
<div ui-view></div>
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
</body
app.js
angular.module('MyApp', ['ngCookies','ngResource', 'ngMessages', 'mgcrea.ngStrap', 'formApp'])
.config(['$locationProvider', '$stateProvider', function($locationProvider, $stateProvider){
$locationProvider.html5Mode(true);
console.log($stateProvider);
}]);
form.js
angular.module('formApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('.profile', {
url: '/profile',
templateUrl: 'views/form-profile.html'
})
// url will be /form/interests
.state('.interests', {
url: '/interests',
templateUrl: 'views/form-interests.html'
})
// url will be /form/payment
.state('.payment', {
url: '/payment',
templateUrl: 'views/form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/');
})
form-controller.js
// our controller for the form
// =============================================================================
angular.module('formApp')
.controller('formController', ['$scope', function($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
}]);
Your code is not following the tutorial exactly. Note that for child states to function, they must reference their parent state.
In the tutorial code:
.state('form.profile', {
In your code:
.state('.profile', {
If you change your child states to reference the parent, they will function correctly. i.e.
.state('home.profile', {
I am having a problem in my view. The view is loaded twice and I have no idea what's going on.
What I have done in my index file is this:
<body class="ng-cloak">
<!--Menus-->
<div class="container-fluid">
<div data-ng-controller="HomeCtrl" class="row">
<!--Here is the ui view directive-->
<div class="col col-md-12" data-ui-view ></div>
</div>
</div>
<!--script files here-->
</body>
On the routes file I have these. The problem only occurs when i visit the contact.inner page
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact.html'
})
.state('contact.inner', {
url: '/inner',
templateUrl: 'partials/inner.html'
});
I'm setting up a very simple AngularJS application and am running into a minor, yet frustrating, issue. Here is the sample application using $routeProvider:
angular.module('thought', [], function($routeProvider, $locationProvider) {
$routeProvider.
when('/thought', {
templateUrl: 'partials/thought/posts.html',
controller: ThoughtCntl
}).
when('/thought/edit/:id', {
templateUrl: 'partials/thought/edit.html',
controller: EditCntl
}).otherwise({
redirectTo: '/thought'
});
$locationProvider.html5Mode(true);
});
Here is the content of posts.html:
<div>
<button>Create</button>
<div>
<h3>Posts</h3>
<ul>
<li ng-repeat="post in publishedPosts">
{{post.title}}
</li>
</ul>
</div>
</div>
When I navigate to /thought, posts.html loads with the appropriate data content. The the link contains 'href=localhost:8080/thought/edit/1234' as it should. However, when I click the link, it attempts to load the template from 'localhost:8080/thought/edit/partials/thought/edit.html'. The templateUrl path is appended to the href path. I'm sure that something simple is mis-configured, but I can't find it. Any ideas what I should look at?
Thanks!
Use the <base> tag :
<base href="/" />