In Django framework first, create a project and then setup all file in Django server. Follow these steps given below
Step1- First, create a project in Django using the link given below and setup database in setting.py file.
http://findnerd.com/account#url=/list/view/How-to-create-project-in-dijango-1-4/15788/
Step2- Then create views.py file in your project. use below code
from django.shortcuts import render
from django.conf import settings
import psycopg2
# Create your views here.
def home(request):
return render(request, 'main.html', {'STATIC_URL': settings.STATIC_URL})
Step3: Then create templates file in a static folder and then in this template folder create main.html file path like this static -> angularapp -> HTML folder.
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'angularapp/css/style.css' %}" />
<script src="{% static "angularapp/js/app.js" %}"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainCtrl">
<div class="container" id="header">
<li>
<a href="javascript:;" class="default_t_color" style="text-decoration:none;">Welcome visitor,</a>
<img src="{% static "angularapp/m1.png" %}" alt="My image" style="text-decoration:none; height: "40px" ; width= "40px" "/>
<a href="javascript:;" ng-click="toggleModal()" class="btn btn-default" onclick="LoginForm();" class="default_t_color" style="text-decoration:none; color:#ed194c;">Log In</a>
<a href="javascript:;" class="default_t_color" style="text-decoration:none;">or,</a>
<a href="javascript:;" onclick="SignForm();" class="default_t_color" style="text-decoration:none; color:#ed194c; ">Create an Account</a>
</li>
</div>
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<div id="formm">
<button type="submit" class="btn btn-default" style="text-decoration:none; color:white; background-color: red; ">Submit</button>
<a href="javascript:;" onclick="SignForm();" class="default_t_color">Forgat Password</a>
</div>
<div id="formm1">
<button type="submit" class="btn btn-default" >Cloase</button>
<button type="submit" class="btn btn-default" style="text-decoration:none; color:white; background-color: blue; ">Create An Account</button>
</div>
</form>
</modal>
</div>
<div id="nav">
<a href="#/aboutus">AboutUs</a><br/>
<a href="#/contact">Contact</a><br/>
</div>
<div id="section">
<div ng-view></div>
<script>
var static_url = '{{STATIC_URL}}'
</script>
</div>
<div id="footer">
Copyright EvonTechnology.com
</div>
</body>
</html>
Step4- Now setup angularjs file in static folder like: test.js file and pass this file in the main.html file, the path should be like: static -> angularapp -> js folder. Use this code shown below
ar module = angular.module("sampleApp", ['ngRoute']);
/*module.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
})*/
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/contact', {
templateUrl: static_url + 'angularapp/html/test1.html',
controller: 'RouteController1'
}).
when('/aboutus', {
templateUrl: static_url + 'angularapp/html/test2.html',
controller: 'RouteController2'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
});
module.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
Step5- Now creatHTMLml file like: static -> angularapp -> HTML folder then create file test1.html and test.html and just use this code in both file show in below
<div class="formm1">
Contact form
</div>
Step6- In a last step, create CSS file like path static -> angularapp -> CSS folder and create style.css file and use this code shown below
#header {
background-color:white;
color:white;
text-align:left;
float: left;
padding:5px;
width: 1290px;
border-bottom: 4px solid Red;
}
#nav {
line-height:20px;
background-color:#eeeeee;
height:599px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
#formm{
border-bottom: 3px solid Red;
margin-top: 20px;
text-align:right;
}
#formm1{
text-align:left;
color: black;
}
0 Comment(s)