I am new to angularjs,i try a demo test for routing ,below is my codes
app.js
var app=angular.module("tutorialApp",["ngRoute","tutorialCtrlModule"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl:"views/tutorial.html",
controller:"TutorialCtrl"
})
.when("/tutorialsecond",{
templateUrl:"views/tutorialSecond.html",
controller:"TutorialCtrl2"
});
});
tutorialCtrl.js
angular.module("tutorialCtrlModule",[])
.controller("TutorialCtrl",["$scope",function($scope){
$scope.name = 'dipti';
$scope.bindvalue = 2;
$scope.timesTwo = function(){
$scope.bindvalue *=2;
}
}])
.controller("TutorialCtrl2",["$scope",function($scope){
$scope.name = 'Dipti';
}]);
index.html
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Tutorial App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
this is my routing pages
tutorial.html
<u><h3>Route Page</h3></u>
<u>Expression</u>
<br>
{{ name }}
<br>
<u>Data Binding</u>
<br>
<label>Name</label>
<br>
<input ng-model="name">
<br>
<p>My first expression: {{ 5 + 1 }}</p>
<br>
Tutorial Second Page
When i load my project the default page tutorial.html will show,but ! sign will come in my url like http://localhost/Angular_demo/#!/
When i click on link in tutorial.html page for routing it not working and this url will show http://localhost/Angular_demo/#!/#%2Ftutorialsecond.How i will slove it.
Configure your hash prefix correctly
angular.module('myApp').config([
'$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix(''); // or whatever you want
}
]);
Extra:
make sure html5mode is active
$locationProvider.html5Mode(true);
and that your base is set
<base href"/"/>
Related
I want to move the angular to its own .js file, so I looked at Using an HTML button to call a JavaScript function.
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
As far as I understand, an event has to be triggered when I click on the button, so I tried following this example on w3schools
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
It simply counts the number of times a button has been clicked and it works. However, when I move the <script> to its own .js, the function is not found. Am I missing something? a dependency perhaps?
New files:
HTML:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
</body>
</html>
.js
<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
So two problems.
First, in your .js file you can remove the <script> tags. You only need this for javascript in html files.
Second, in your .html file, you need to add a reference to your script file. This needs to go below the angular script since it is dependent on that script, so just add, <script src="[link to your script file]"></script> to your html right below the angular script.
.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
So I am trying to build the simplest Angular JS application and no idea what I am doing wrong.
It is made of 4 files:
index.html - which I use like a layout to display main.html
app1.js - used for defining simple routing rules like /main should redirect to main.html in combination with MainController; when it doesn't find a valid path, revert to a default which equals the previous path
MainController.js - I just have some timer functions here
main.html - displays a search button and search textbox
For some reason, I can't see mainvtemplate from my index.html which should redirect me to /main.
Here is the code:
index.html file
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
the app1.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
the main.html file:
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
You may ignore the countdown, this is a timer created in MainController.js. I render its simplified logic:
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
$scope.countdown = 5;
};
app.controller("MainController", MainController);
}());
Isn't weird I'm not able to see the search button and search textbox? Maybe I am missing sth really obvious here.
in your index.html
<script src="app.js"></script>
replace with
<script src="app1.js"></script>
main.html
<div ng-app="githubViewer" ng-controller="MainController ">// add ng app ang nd cntroller
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
In my application i have declared ng-app in Master.html and added all script, stylesheet references in it
this is my master page
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<script src="../Angular/angular.min.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Scripts/AngularServices/App.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<li><i class="fa fa-circle-o"></i>Group</li>
<li><i class="fa fa-circle-o"></i>Member</li>
<section class="content">
<div ng-view></div>
</section>
</body>
</html>
App.js
var mainApp = angular.module("mainApp", ['ngRoute'])
mainApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/main/Group', { templateUrl: '/Portal/Group.html', controller: 'GroupController' }),
$routeProvider.when('/main/Member', { templateUrl: '/Portal/Member.html', controller: 'MemberController' });
$locationProvider.html5Mode(true);
});
// group
mainApp.controller('GroupController', function ($scope, $http) {
$http.get('/api/APIGroup/GetGroupDetails').then(function (result) {
$scope.group = result.data;
});
});
Group.html
<div ng-controller="GroupController">
<div class="row">
<h1>Welcome to group</h1>
my content here
</div>
</div>
when i execute master page and if click group link group.html form opening inside master page my url like this
http://localhost:50810/main/chitGroup
but if reload page here am getting error as
Server Error in '/' Application.
The resource cannot be found.
Master page not applying to how to fix this
In your angular.app you have ngRoute to handle your states for create Single Page Application.
ngRoute need to pass the state names correctly as ng-href="#!/main/Group", that because when you use ngRoute the url changed automaticly to http://localhost:50810/#!/
Server Error in '/' Application.
The resource cannot be found.
This error because you redirect to http://localhost:50810 to find /main/Group which not exist.
I am writing a web app using AngularJS. It is not a single page application but all my codes are in one file- index.ejs.
So my set up for index.ejs roughly looks like this:
<head>
<title> Main page </title>
</head>
<body>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
</div>
<script type = "text/ng-template" id = "/main.html">
.....
</script>
<script type = "text/ng-template" id = "/addStuff.html">
.....
</script>
<script type = "text/ng-template" id = "/searchStuff.html">
.....
</script>
<script type = "text/ng-template" id = "/about.html">
.....
</script>
</body>
I have a title for the main page on top of index.ejs. I would also like to have seperate titles for each page so when they are opened in a new tab, I know which one is which. I have tried doing:
<script type = "text/ng-template" id = "/addStuff.html">
<head>
<title> Add Stuff </title>
</head>
.....
But this doesn't work. Any ideas? Thanks.
You should use ui-router. In which case you can add a top level controller on the body or html element, for example <html ng-app="my-app" ng-controller="AppCtrl">
And add a '$stateChangeSuccess' listener whenever a new route is loaded...
.controller('AppCtrl', function AppCtrl($scope) {
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (angular.isDefined(toState.data.pageTitle)) {
$scope.pageTitle = toState.data.pageTitle;
}
});
})
Then in the route definition you can add a property called data.pageTitle
$stateProvider.state( 'profile', {
url: '/profile',
views: {
"main": {
controller: 'ProfileCtrl',
templateUrl: 'profile/profile.tpl.html'
}
},
data:{
pageTitle: 'Profile'
}
})
Then in your main index.html file, you can bind the pageTitle attribute:
<title ng-bind="pageTitle"></title>
The most important part is the you move the directive ng-app on the <html> tag if it's not already in there.
Thus all the html page is covered by angular.
Eg:
<html ng-app="app">
...
</html>
Then it's really your choice.
You can use a custom directive to wrap the title, generate a service or just use the {{ }} syntax.
I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this