We had created a component named contact using angularjs#1.6 and angular-ui-router#1.0.0-rc.1.The problem lies on click of a button,nothing is displayed in the home page.It would be great if someone could help us to figure out the error.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Component based routing</title>
<!--Styles-->
<!--Libs-->
<script src="../libs/angular.js"></script>
<script src="../libs/angular-ui-router.js"></script>
<!--Components-->
<script src="app.js"></script>
<script src="contact/contact.js"></script>
<script src="contact/contact.component.js"></script>
</head>
<body>
<h1>Component based routing</h1>
<div ng-app="app">
<ul>
<li>
Contact
</li>
</ul>
<h4>Test</h4>
<ui-view></ui-view>
</div>
</body>
</html>
app.js
angular.module('app',[]);
contact.js
angular
.module('contactApp', ['ui-router']);
contact.component.js
angular
.module('contactApp')
.config(['$stateProvider',function ($stateProvider) {
$stateProvider.state('contact', {
url: '/contact',
component: 'contact'
})
}])
.component('contact',{
template: `<h1>Contact</h1>`
})
You app module, where component is registered, is contactApp. You need to change html to that app module:
<div ng-app="contactApp">
EDIT
If we assume that app is the main app module and there are other modules declared, then all the other have to be registered under that main app like this:
angular.module('app', ['contactApp']);
and then in html you use app, as you already do:
<div ng-app="app">
*You can also have multiple apps in the same html but it is not the recommented way
Related
I am new to AnguarJS and to be honest a bit confused right now.
I just started getting into routing and create this very small app just for testing, but it's not working.
Let me share the entire app, which is... just 2 files:
1/ app.js
angular
.module('app', ['ui.router'])
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: 'first',
template: `<h1>First message</h1>`
});
}]);
2/ index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ui routing testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
First Message
<div ui-view></div>
</body>
</html>
That's it! But when I run the app with npx http-server -o the templatedoesn't show when I click and land on the #/first url.
Does anyone have an idea where the problem comes from?
I think you are missing a / in your url property
angular
.module('app', ['ui.router'])
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: '/first', // HERE
template: `<h1>First message</h1>`
});
}]);
I have my files setup right now out of which one them is my index.html file and another is a app.javascript file. For some reason I keep getting error saying" Angular is not defined" which I unsure why as my script files look placed properly too. Below is how my index file and app.js file look like
index.html
<html>
<head>
<meta charset="utf-8">
<!Stylesheet>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!Javascript>
<!-- 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="app.js"></script>
</head>
<!MainAngularApp>
<body ng-app="OnboardingApp">
<div class="container">
<!Injecting all the views here>
<div ui-view></div>
</div>
</body>
</html>
app.js
//Creating our Angular App injecting ngAnimate, UIRouter
angular.module('OnboardingApp', ['ngAnimate', 'ui.router'])
//Configuring the routes
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//Route followed to show our form
.state('form',{
url:'/form',
templateUrl: 'form.html',
controller: 'formController'
})
//Nested States where each will have their own view
//Nesting the sign up form
.state('form.signup',{
url:'/signup',
templateURL:'form-signup.html'
})
//Nesting the Question form
.state('form.questions',{
url:'/questions',
templateUrl:'form-questions.html'
})
//Nesting the Finish form
.state('form.finish',{
url:'/finish',
templateUrl:'form-finish.html'
});
$urlRouterProvider.otherwise('/form/signup');
})
.controller('formcontroller', function($scope){
//Storing all the form data into the form data object
$scope.formData= {};
//Function to process form data
$scope.processData = function(){
alert('Sign up is successful')
};
});
You need to define ng-app in your view so that angularjs app gets initiatied,
<div class="container" ng-app="OnboardingApp">
I'm new to angularJS and have been working on a tutorial in visual studio on angularjs routing, but even though I change the url link, the ng-view doesn't change.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="mainApp">
home
another page
<div ng-view></div>
</body>
</html>
This is my controller.js
var app = angular.module('mainApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
template: 'Home'
})
.when('/anotherpage', {
template: 'another page'
})
.otherwise({
template: 'index'
});
});
Even though I change the url to /index.html#/home, the content in the div is always 'index'. can anyone suggest any solutions for this.
change the html as below it should work.
home
another page
<div ng-view></div>
I wrote a angular site, and in it I use rerouting to get a partial view into the main index. My site works fine when it's on my local PC.
The main view, Index.html, has a ng-view div, which should display The partial view in Chapter.html when the site first loads. The code for this is in myScript, app.Config.
I uploaded the site to Somee hosting server, and the Chapter.html view is not shown inside index.html.
I researched a bit and it seems that servers shouldn't have problems with angularjs. Besides, it doesn't seem to be a problem with all of angular, because my banner directive works.
I'm using my own copies of angular script, but I don't think that's the issue.
This is the basics of my code:
Index.html:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/MyStyle.css" rel="stylesheet" />
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../modules/myModule.js"></script>
<script src="../Controllers/myController.js"></script>
<script src="../Scripts/MyScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" class="container-fluid">
<banner></banner>
<div id="chapter" class="ng-view">
</div>
</body>
</html>
Chapter.html:
<div>
<img src="../Images/Chapter1.1.jpg" />
</div>
myScript.js:
app.directive("banner", function () {
return {
template: "<h1>My Title</h1>"
};
});
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Chapter.html"
});
});
I am new to AngularJS. I have created a basic website where I have added 2 links and I want to create route for the same.
Below is my index.html file:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
But when I run my code, both tags above are not coming as links.
The problem is simply that you don't have any routes registered with ui-router. When you register your routes, the ui-sref directive will add the href tags and the default hyperlink styling will be applied. Read more about hyperlinks and anchor tags here.
Example: Live Demo
.config([
'$stateProvider',
function($stateProvider) {
$stateProvider
.state('myState', {
url: '/my/path',
controller: 'MyStateController',
templateUrl: 'my-state.html'
});
}
]);
HTML:
<a ui-sref="myState">My State</a>
The ui-sref directive will then render this:
My State <!-- HTML5 Mode -->
My State <!-- hashbang mode -->